最新公告
  • 欢迎您光临剑来源码,购买独家源码,请前往销售大厅!立即加入我们
  • html5 canvas实现图片切换

    html5 canvas实现图片切换

    如果您是本站会员;我们将为您提供技术支持!!!

     

    本篇文章给大家带来的内容是关于html5 canvas如何实现图片切换(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    这几天研究canvas制作动态背景的时候,发现这个东西稍微改改就变成图片切换的功能了,可以代替动态修改img标签的src属性,实现图片定时切换功能。先奉上代码:

    function switchPic(containerId, pics, {  speed = 1000,  width = 100,  height = 100,  callback = function(pic) {} } = {}) { //判断  if (!containerId || !pics)   throw new Error ("TypeError: switchPic-->    containerId or pics is undefined!");  if(typeof containerId !== "string" ||      {}.toString.call(pics) !== "[object Array]" )  throw new Error ("TypeError: switchPic-->    containerId is not string or pics is not array!");  //制作canvas  let canvas = document.createElement("canvas");  canvas.width = width;  canvas.height = height;  canvas.style.cursor = "pointer";  //放入canvas  document.querySelector("#" + containerId).appendChild(canvas);  ctx = canvas.getContext("2d");  let img = new Image(),      timer = null,      i = 1,      change = function() {        img.src = pics[i - 1];        img.onload = function() {          ctx.clearRect(0, 0, width, width); //动态背景图这里可能需要修改,如果帧图都在一张图片中,这就需要裁剪显示,再多几个参数了          ctx.drawImage(img, 0, 0, width, width);          i++;          if(i > pics.length) i = 1; /*这里动态背景图是动画效果,所以用requestAnimationFrame比计时器更好;   而且切换图片显示需要速度控制,所以计时器适用; */          timer = setTimeout(change, speed);         }       };  timer = setTimeout(change, speed);  canvas.addEventListener("mouseenter", function() {    canvas.title = img.src;    clearTimeout(timer);  })  canvas.addEventListener("mouseleave", function() {    timer = setTimeout(change, speed);  })  canvas.addEventListener("click", function(event) {    callback.call(this, img.src);  }) }

    代码解释:

    1. 参数 containerId是盛放canvas的容器id, pics是图片src的数组,这两个是必须的, {speed = 1000,width = 100,height = 100,callback = function(pic) {} } 这是选填的一堆,看名字就知道是干啥的了,依次是切换速度,canvas的宽高(这里设置了显示的图片也是同样的大小,所以尽可能根据图片的像素大小来设置,这样不会模糊),回调函数是如果点击当前图片会做的事情,参数是当前图片的src地址;

    2. 其他的没啥可细说的,代码比较简单,通过添加监听事件,来保证鼠标移入时,停止切换,移出时继续切换,然后点击激活回调函数;

    3. 说明一下和img标签src切换版的区别:首先就是不会引起过多的重绘,img的src切换,浏览器会重绘,大家可以自己看一下F12的记录,而用canvas是不会引起重绘;其二,img标签可以设置切换的样式,淡入淡出啥的比较容易,canvas版就比较复杂了,得有canvas功底了。

    剑来源码专注于网络资源分享,百度搜索:剑来源码。
    剑来源码 » html5 canvas实现图片切换

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    剑来源码
    专注为开发人员提供建站资源

    发表评论

    升级SVIP尊享更多特权立即升级