商業源碼 2019-09-28

html5 canvas實現圖片切換

文章目錄
1 html5 canvas實現圖片切換
1.1 代碼解釋：

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--&gt;    containerId or pics is undefined!");  if(typeof containerId !== "string" ||      {}.toString.call(pics) !== "[object Array]" )  throw new Error ("TypeError: switchPic--&gt;    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 &gt; 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功底了。

由於網站搬家，部分鏈接失效，如無法下載，請聯繫站長！謝謝支持！
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途！
3. 分享目的僅供大家學習和交流，請不要用於商業用途！
4. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
5. 本站所有資源來源於站長上傳和網路，如有侵權請郵件聯繫站長！
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
9. 如果你也有好源碼或者教程，可以到審核區發布，分享有金幣獎勵和額外收入!
10.如果您購買了某個產品，而我們還沒來得及更新，請聯繫站長或留言催更，謝謝理解 !
GG資源網 » html5 canvas實現圖片切換

分享到：