本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于html5 canvas如何實(shí)現(xiàn)圖片切換（代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

這幾天研究canvas制作動(dòng)態(tài)背景的時(shí)候，發(fā)現(xiàn)這個(gè)東西稍微改改就變成圖片切換的功能了，可以代替動(dòng)態(tài)修改img標(biāo)簽的src屬性，實(shí)現(xiàn)圖片定時(shí)切換功能。先奉上代碼：

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);//動(dòng)態(tài)背景圖這里可能需要修改，如果幀圖都在一張圖片中，這就需要裁剪顯示，再多幾個(gè)參數(shù)了 ctx.drawImage(img, 0, 0, width, width); i++; if(i pics.length) i = 1;/*這里動(dòng)態(tài)背景圖是動(dòng)畫效果，所以用requestAnimationFrame比計(jì)時(shí)器更好； 而且切換圖片顯示需要速度控制，所以計(jì)時(shí)器適用； 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. 參數(shù) containerId是盛放canvas的容器id, pics是圖片src的數(shù)組,這兩個(gè)是必須的， {speed = 1000,width = 100,height = 100,callback = function(pic) {} } 這是選填的一堆，看名字就知道是干啥的了，依次是切換速度，canvas的寬高（這里設(shè)置了顯示的圖片也是同樣的大小，所以盡可能根據(jù)圖片的像素大小來(lái)設(shè)置，這樣不會(huì)模糊），回調(diào)函數(shù)是如果點(diǎn)擊當(dāng)前圖片會(huì)做的事情，參數(shù)是當(dāng)前圖片的src地址；

2. 其他的沒(méi)啥可細(xì)說(shuō)的，代碼比較簡(jiǎn)單，通過(guò)添加監(jiān)聽事件，來(lái)保證鼠標(biāo)移入時(shí)，停止切換，移出時(shí)繼續(xù)切換，然后點(diǎn)擊激活回調(diào)函數(shù)；

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

以上就是html5 canvas如何實(shí)現(xiàn)圖片切換（代碼）的詳細(xì)內(nèi)容，其它編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。