Canvas实现图片切换功能

最新推荐文章于 2024-08-15 15:01:02 发布

LakenQi

最新推荐文章于 2024-08-15 15:01:02 发布

阅读量4.4k

点赞数 1

分类专栏： h5随笔 js随笔文章标签： canvas· 图片切换

本文链接：https://blog.csdn.net/qq_38047742/article/details/83379097

版权

本文介绍如何利用Canvas实现图片切换功能，作为动态背景的替代方案。通过调整Canvas的代码，可以实现图片的定时切换，避免了频繁修改img标签src属性导致的重绘问题。同时，代码提供了鼠标移入停止切换、移出继续切换以及点击回调函数的功能。相比于img标签，Canvas实现的切换可能需要更多的技巧来添加过渡效果，但能保证更好的性能。

摘要由CSDN通过智能技术生成

这几天研究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(