本文實(shí)例為大家分享了canvas實(shí)現(xiàn)雨滴特效的具體代碼，供大家參考，具體內(nèi)容如下
一、雨滴特效需求
雨滴從窗口頂部隨機(jī)下落到達(dá)底部將呈現(xiàn)波紋逐漸散開變淡直到消失，雨滴特效隨窗口變化自適應(yīng)
二、雨滴實(shí)現(xiàn)思路
1. 用面向?qū)ο蟮乃季S 首先創(chuàng)建canvas畫布 ，繪制一個(gè)雨滴的初始化形狀
2. 在給雨滴添加運(yùn)動的方法
3. 通過定時(shí)器讓雨滴運(yùn)動起來
三、具體分析
1.雨滴初始化需要的屬性有哪些？
坐標(biāo)x，y 寬高w，h 。
2.雨滴下落是逐漸加速下落不是勻速需要給一個(gè)加速度的屬性，也就是y軸坐標(biāo)不斷加上加速度的值
3.雨滴下落到底部某一個(gè)區(qū)域后開始呈現(xiàn)波紋逐漸散開，也就是到達(dá)底部某個(gè)范圍內(nèi)開始畫圓，圓逐漸變大并且變淡加上透明度
4.雨滴下落拖尾效果需要繪制一層陰影覆蓋之前運(yùn)動的雨滴
四、代碼
|
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas</title> <style> * { margin: 0; padding: 0; } canvas { vertical-align: middle; background: #000; } </style></head><body> <canvas id="myCanvas"></canvas> <script> // 創(chuàng)建畫布 let myCanvas = document.getElementById('myCanvas') let ctx = myCanvas.getContext('2d') // 自適應(yīng)窗口 let width = myCanvas.width = window.innerWidth let height = myCanvas.height = window.innerHeight window.addEventListener('resize', () => { width = myCanvas.width = window.innerWidth height = myCanvas.height = window.innerHeight }) // 繪制雨滴 let raindropArr = [] function Raindrop(x, y, w, h, l, r, dr, maxR, a, va) { this.x = rand(0, window.innerWidth) // 雨滴的x軸 this.y = y || 0 // 雨滴的y軸 this.dy = rand(2, 4) // 雨滴的加速度 this.w = w || 2 // 雨滴的寬度 this.h = h || 10 // 雨滴的高度 this.l = rand(0.8 * height, 0.9 * height) // 雨滴的下落高度 this.r = r || 1 // 波紋半徑 this.dr = dr || 1 // 波紋增加半徑 this.maxR = maxR || 50 // 波紋最大半徑 this.a = a || 1 // 波紋透明度 this.va = 0.96 // 波紋透明度系數(shù) } Raindrop.prototype = { draw: function (index) { // 繪制雨滴 if (this.y > this.l) { ctx.beginPath() ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2) ctx.strokeStyle = `rgba(0,191,255,${this.a})` ctx.stroke() } else { ctx.fillStyle = 'skyBlue' ctx.fillRect(this.x, this.y, this.w, this.h) } this.update(index) }, update: function (index) { // 更新雨滴坐標(biāo) 運(yùn)動起來 if (this.y > this.l) { if (this.a > 0.03) { this.r += this.dr if (this.r > this.maxR) { this.a *= this.va } } else { this.a = 0 raindropArr.splice(index, 1) } } else { this.y += this.dy } } } function rand(min, max) { return Math.random() * (max - min) + min } setInterval(() => { let raindrop = new Raindrop() raindropArr.push(raindrop) }, 100) setInterval(() => { ctx.fillStyle = 'rgba(0, 0, 0, 0.1)' ctx.fillRect(0, 0, myCanvas.width, myCanvas.height) for (let i = 0; i < raindropArr.length; i++) { raindropArr[i].draw(i) } }, 30) </script></body></html> |
五、總結(jié)
canvas基本上任何運(yùn)動，特效，都是通過js定時(shí)器改變坐標(biāo)的方式實(shí)現(xiàn)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/dzhi1931/article/details/112362649
