html5中canvas實現圖片切換的方法是什么

這篇文章將為大家詳細講解有關html5中canvas實現圖片切換的方法是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

這幾天研究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(),
     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);
 })
}

代碼解釋：

1. 參數 containerId是盛放canvas的容器id, pics是圖片src的數組,這兩個是必須的， {speed = 1000,width = 100,height = 100,callback = function(pic) {} } 這是選填的一堆，看名字就知道是干啥的了，依次是切換速度，canvas的寬高（這里設置了顯示的圖片也是同樣的大小，所以盡可能根據圖片的像素大小來設置，這樣不會模糊），回調函數是如果點擊當前圖片會做的事情，參數是當前圖片的src地址；

2. 其他的沒啥可細說的，代碼比較簡單，通過添加監聽事件，來保證鼠標移入時，停止切換，移出時繼續切換，然后點擊激活回調函數；

3. 說明一下和img標簽src切換版的區別：首先就是不會引起過多的重繪，img的src切換，瀏覽器會重繪，大家可以自己看一下F12的記錄，而用canvas是不會引起重繪；其二，img標簽可以設置切換的樣式，淡入淡出啥的比較容易，canvas版就比較復雜了，得有canvas功底了。

關于html5中canvas實現圖片切換的方法是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。