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

 })

}