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如何实现图片切换（代码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！