首頁 > web前端 > H5教程 > html5 canvas如何實現圖片切換(程式碼)

html5 canvas如何實現圖片切換(程式碼)

不言
發布: 2018-10-26 14:52:55
轉載
5674 人瀏覽過

這篇文章帶給大家的內容是關於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

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中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板