這篇文章帶給大家的內容是關於html5 canvas如何實現圖片切換(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
#這幾天研究canvas製作動態背景的時候,發現這個東西稍微改改就變成圖片切換的功能了,可以代替動態修改img標籤的src屬性,實現圖片定時切換功能。先奉上碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
|
程式碼解釋:
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中文網其他相關文章!