介绍
这篇文章将为大家详细讲解有关html5画布中实现图片切换的方法是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
这几天研究帆布制作动态背景的时候,发现这个东西稍微改改就变成图片切换的功能了,可以代替动态修改img标签的src属性,实现图片定时切换功能,先奉上代码:
函数switchPic (containerId,照片,{
速度=1000,
宽度=100,
身高=100,
回调函数=(pic) {}
}={}){//判断
如果(!containerId | | !图片)
把新的错误(“TypeError: switchPic——比;
containerId或图片没有定义!“);
如果(typeof containerId !==皊tring"||
{}.toString.call(图片)!==癧对象数组]“)
把新的错误(“TypeError: switchPic——比;
containerId不是字符串或图片不是数组!“);//制作画布
让帆布=document.createElement (“canvas");
画布。宽度=宽度;
画布。身高=身高;
canvas.style。光标=皃ointer";//放入画布
document.querySelector (“#”;+ containerId) .appendChild(画布);
ctx=canvas.getContext (“2 d");
让img=新形象(),
计时器=零,
我=1,
改变=function () {
img。src=https://www.yisu.com/zixun/pics [i - 1];
img。onload=function () {
ctx。clearRect(0, 0,宽度、宽度);//动态背景图这里可能需要修改,如果帧图都在一张图片中,这就需要裁剪显示,再多几个参数了
ctx。drawImage (img, 0, 0,宽度、宽度);
我+ +;
如果(我> pics.length)=1;/*这里动态背景图是动画效果,所以用requestAnimationFrame比计时器更好;
而且切换图片显示需要速度控制,所以计时器适用;
*/计时器=setTimeout(变化、速度);
}
};
计时器=setTimeout(变化、速度);
画布。addEventListener (“mouseenter函数(){
画布。标题=img.src;
clearTimeout(计时器);
})
画布。addEventListener (“mouseleave函数(){
计时器=setTimeout(变化、速度);
})
画布。addEventListener(“点击”,函数(事件){
回调。调用(这,img.src);
})
} 代码解释:
1。参数containerId是盛放油画的容器id,图片是图片src的数组,这两个是必须的,{速度=1000,宽度=100,高度=100,回调函数=(pic){}}这是选填的一堆,看名字就知道是干啥的了,依次是切换速度,画布的宽高(这里设置了显示的图片也是同样的大小,所以尽可能根据图片的像素大小来设置,这样不会模糊),回调函数是如果点击当前图片会做的事情,参数是当前图片的src地址;
2。其他的没啥可细说的,代码比较简单,通过添加监听事件,来保证鼠标移入时,停止切换,移出时继续切换,然后点击激活回调函数;
3。说明一下和img标签src切换版的区别:首先就是不会引起过多的重绘,img的src切换,浏览器会重绘,大家可以自己看一下F12的记录,而用帆布是不会引起重绘;其二,img标签可以设置切换的样式,淡入淡出啥的比较容易,帆布版就比较复杂了,得有帆布功底了。
关于html5画布中实现图片切换的方法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
