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

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),宜豐企業(yè)網(wǎng)站建設(shè),宜豐品牌網(wǎng)站建設(shè),網(wǎng)站定制,宜豐網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,宜豐網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

這幾天研究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功底了。

關(guān)于html5中canvas實(shí)現(xiàn)圖片切換的方法是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章標(biāo)題：html5中canvas實(shí)現(xiàn)圖片切換的方法是什么
轉(zhuǎn)載源于：http://www.chinadenli.net/article46/jiiihg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、軟件開發(fā)、Google、云服務(wù)器、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)