這篇文章帶給大家的內容是關於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如何實現圖片切換（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
