本篇 文章 给大家带来的内容是关于 HTML5 canvas 如何实现图片切换（代码）， 有一定的参考价值 ， 有需要的朋友可以参考一下 ，希望对你有所帮助。
这几天研究canvas 制作 动态背景的时候，发现这个东西稍微改改就变成图片切换的功能了，可以代替动态修改 img 标签的src属性，实现图片定时切换功能。先奉上代码：
function sw IT chPic(cont ai nerId, pics, {
s PE ed = 1000,
width = 100,
h ei ght = 100,
callback = function(pic) {}
} = {}) {
//判断
if (!containerId || !pics)
t hr ow new Error ("TypeError: switchPic-->
containerId or pics is un define d!");
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(" ;m ouseenter", 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切换，浏览器会重绘，大家可以自己看一下 F1 2的记录，而用canvas是不会引起重绘；其二，img标签可以设置切换的样式，淡入淡出啥的比较容易，canvas版就比较复杂了，得有canvas功底了。
以上就是ht ML 5 canvas如何实现图片切换（代码）的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 html5 canvas如何实现图片切换（代码） 全部内容，希望文章能够帮你解决 html5 canvas如何实现图片切换（代码） 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5 canvas如何实现图片切换（代码）的详细内容...