溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎么在JavaScript中利用canvas實現一個雨滴效果？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
一、雨滴特效需求
雨滴從窗口頂部隨機下落到達底部將呈現波紋逐漸散開變淡直到消失，雨滴特效隨窗口變化自適應
二、雨滴實現思路
1. 用面向對象的思維 首先創建canvas畫布 ，繪制一個雨滴的初始化形狀
2. 在給雨滴添加運動的方法
3. 通過定時器讓雨滴運動起來
三、具體分析
1.雨滴初始化需要的屬性有哪些？
坐標x，y 寬高w，h 。
2.雨滴下落是逐漸加速下落不是勻速需要給一個加速度的屬性，也就是y軸坐標不斷加上加速度的值
3.雨滴下落到底部某一個區域后開始呈現波紋逐漸散開，也就是到達底部某個范圍內開始畫圓，圓逐漸變大并且變淡加上透明度
4.雨滴下落拖尾效果需要繪制一層陰影覆蓋之前運動的雨滴
四、代碼
<!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>
// 創建畫布
let myCanvas = document.getElementById('myCanvas')
let ctx = myCanvas.getContext('2d')
// 自適應窗口
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 // 波紋透明度系數
}
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) { // 更新雨滴坐標 運動起來
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>關于怎么在JavaScript中利用canvas實現一個雨滴效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
