html5canvas怎样实现图片切换（代码）-

本篇文章给大家带来的内容是对于html5canvas怎样实现图片切换（代码），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

本篇文章给大家带来的内容是对于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怎样实现图片切换（代码）的细致内容，更多请关注 百分百源码网 其它相干文章！