html5 canvas如何实现图片切换（代码）

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); })}