JavaScript Canvas实现兼容IE的兔子发射爆破动图特效

Hello，同学们好！又是一年新春之际，祝福大家兔年快乐！给大家介绍一个有趣的动效（兼容 IE），页面右下角有一只搞怪的兔子，鼠标在页面中悬停时，兔子会跟着做出不同的动作和表情。然后可以在页面中任意位置（离兔子太近不能发射，会伤到兔子😆）点击鼠标，将从兔子眼睛👀里发射炮弹，随之击中爆破的是你的霉 运、压 力、贫 穷、疾 病😮‍💨。

实现

• 定义一个随机文本块。

1. <p id="p1"></p> 

• 定义兔子的构造函数。

1. function HoverRabbit() { 
2.   this.explodeImage = new Image(); 
3.   this.explodeImage.src = "img/explode.png"; 
4.   for (var i = 1; i &lt;= 6; i++) { 
5. this.images[i] = new Image(); 
6. this.images[i].src = "img/s" + i + ".png"; 
7.   } 
8.   if (typeof(CanvasGradient) != 'undefined') { 
9. this.canvas = document.createElement("canvas"); 
10. this.canvas.width = screen.width + 100; 
11. this.canvas.height = screen.height; 
12. this.canvas.style.position = 'absolute'; 
13. this.canvas.style.left = '0px'; 
14. this.canvas.style.top = '0px'; 
15. this.canvas.style.display = 'none'; 
16. document.body.appendChild(this.canvas); 
17. this.canvas.style.position = 'fixed'; 
18.   } 
19. } 

• 定义兔子原型的属性和方法。

1. HoverRabbit.prototype = { 
2.   images: [], 
3.   explodeImage: null, 
4.   eyePositions: [], 
5.   current: 1, 
6.   frame: 1, 
7.   canvas: null, 
8.   interval: null, 
9.   start: function() { 
10. var me = this; 
11. this.eyePositions[1] = { 
12.   eye1x: 123, 
13.   eye1y: 47, 
14.   eye2x: 104, 
15.   eye2y: 53 
16. }; 
17. this.eyePositions[2] = { 
18.   eye1x: 120, 
19.   eye1y: 50, 
20.   eye2x: 101, 
21.   eye2y: 54 
22. }; 
23. this.eyePositions[3] = { 
24.   eye1x: 119, 
25.   eye1y: 54, 
26.   eye2x: 97, 
27.   eye2y: 56 
28. }; 
29. this.eyePositions[4] = { 
30.   eye1x: 112, 
31.   eye1y: 61, 
32.   eye2x: 90, 
33.   eye2y: 61 
34. }; 
35. this.eyePositions[5] = { 
36.   eye1x: 105, 
37.   eye1y: 64, 
38.   eye2x: 85, 
39.   eye2y: 61 
40. }; 
41. this.eyePositions[6] = { 
42.   eye1x: 98, 
43.   eye1y: 68, 
44.   eye2x: 79, 
45.   eye2y: 56 
46. }; 
47. document.onmousemove = function(e) { 
48.   me.onmousemove(e); 
49. } 
50. if (this.canvas) { 
51.   document.addEventListener("click", function(e) { 
52. me.ondblclick(e); 
53.   }); 
54. } 
55.   }, 
56.   onmousemove: function(e) { 
57. var event = e || window.event; 
58. var deg = Math.abs(screen.height - event.screenY) / (Math.abs(screen.width - event.screenX) + 1); 
59. var n = 1; 
60. if (deg > 2) n = 6; 
61. else if (deg > 1.4) n = 5; 
62. else if (deg > 0.7) n = 4; 
63. else if (deg > 0.45) n = 3; 
64. else if (deg > 0.2) n = 2; 
65. this.deg = n; 
66. if (this.current != n) { 
67.   document.body.style.backgroundImage = "url(" + this.images[n].src + ")"; 
68.   this.current = n; 
69. } 
70.   }, 
71.   drawBomb: function(ctxt, n, x, y) { 
72. var sx = 64 * (n % 4); 
73. var sy = 64 * (Math.floor(n / 4)); 
74. ctxt.drawImage(this.explodeImage, sx, sy, 64, 64, x - 32, y - 32, 64, 64); 
75.   }, 
76.   ondblclick: function(e) { 
77. if (this.canvas.style.display != 'none') return; 
78. var me = this; 
79. if (e.clientX > window.innerWidth - 200 && e.clientY > window.innerHeight - 200) return; 
80. var ctxt = this.canvas.getContext("2d"); 
81. this.frame = 1; 
82. this.interval = setInterval(function(e2) { 
83.   ctxt.clearRect(0, 0, me.canvas.width, me.canvas.height); 
84.   switch (me.frame) { 
85. case 1: 
86.   ctxt.strokeStyle = 'rgba(247,166,71,1)'; 
87.   me.canvas.style.display = 'block'; 
88. case 2: 
89.   if (me.frame == 2) { 
90. ctxt.strokeStyle = 'rgba(247,166,71,0.5)'; 
91. me.drawBomb(ctxt, 0, e.clientX, e.clientY); 
92.   } 
93.   case 3: 
94. if (me.frame == 3) { 
95.   ctxt.strokeStyle = 'rgba(247,166,71,0.1)'; 
96.   me.drawBomb(ctxt, 1, e.clientX, e.clientY); 
97. } 
98. var eye1x = window.innerWidth - me.eyePositions[me.current].eye1x; 
99. var eye1y = window.innerHeight - me.eyePositions[me.current].eye1y; 
100. ctxt.lineWidth = 3; 
101. ctxt.beginPath(); 
102. ctxt.moveTo(eye1x, eye1y); 
103. ctxt.lineTo(e.clientX, e.clientY); 
104. ctxt.stroke(); 
105. var eye2x = window.innerWidth - me.eyePositions[me.current].eye2x; 
106. var eye2y = window.innerHeight - me.eyePositions[me.current].eye2y; 
107. ctxt.beginPath(); 
108. ctxt.moveTo(eye2x, eye2y); 
109. ctxt.lineTo(e.clientX, e.clientY); 
110. p1.textContent = ['霉 运', '压 力', '贫 穷', '疾 病'][Math.floor(Math.random() * 4)]; 
111. p1.style.display = 'block'; 
112. p1.style.transform = 'rotate(' + (-150 + me.deg * 30) + 'deg)'; 
113. p1.style.left = e.clientX - 30 + 'px'; 
114. p1.style.top = e.clientY - 30 + 'px'; 
115. fade(p1); 
116. ctxt.stroke(); 
117. break; 
118.   case 4: 
119. me.drawBomb(ctxt, 2, e.clientX, e.clientY); 
120. break; 
121.   case 14: 
122. me.canvas.style.display = 'none'; 
123. window.clearInterval(me.interval); 
124. break; 
125.   default: 
126. me.drawBomb(ctxt, me.frame - 2, e.clientX, e.clientY); 
127.   } 
128.   me.frame++; 
129. }, 50); 
130.   } 
131. }; 

各个属性和方法说明：

• images - 兔子不同的动作的图片数组。
• explodeImage - 炮弹图片元素。
• eyePositions - 兔子眼睛位置的数组。
• current - 整型数字，兔子当前动作的指针。
• frame - 整型数字，发射炮弹动画的帧数指针。
• canvas - 画布元素。
• interval - 发射炮弹动画时间间隔定时器的 interval ID。
• start - 启动页面交互的方法，在这里初始化了兔子眼睛位置的数组数据，绑定页面鼠标移动事件、点击事件。
• onmousemove - 定义页面鼠标移动的实现方法。
• ondblclick - 定义页面鼠标点击的实现方法。
• drawBomb - 定义绘制和更新炮弹动画的方法。

• 定义文字淡出的动画。

1. function fade(e) { 
2.   var s = e.style; 
3.   s.opacity = 1; 
4.   (function hide() { 
5. (s.opacity -= .01) < 0 ? s.display = "none" : requestAnimationFrame(hide); 
6.   })(); 
7. } 

• 创建兔子对象，调用启动交互方法。

1. var s = new HoverRabbit(); 
2. s.start();