#####实现原理:
利用canvas特性,在画布创建一定雪花,渲染出来,并设置雪花的下降速度
1.js部分
const cvs = document.getElementById('canvas')//获取元素
const ctx = cvs.getContext('2d')
const {
clientWidth: width,
clientHeight: height
} = document.documentElement//取屏幕宽高重新命名
cvs.width = width
cvs.height = height
ctx.fillStyle = '#fff'//雪花颜色
//创建所有雪花数据
const bgColor = Array.from(new Array(400)).map(v => {
return {
x: Math.random() * width,
y: Math.random() * height,
step: Math.random() * 2.5 + 0.5
}
})
//渲染
const render = () => {
ctx.clearRect(0, 0, width, height)
ctx.beginPath()
bgColor.forEach(v => {
v.y = v.y > height ? 0 : (v.y + v.step)
ctx.rect(v.x, v.y, 3, 3)
})
ctx.fill()
requestAnimationFrame(render)
}
render()
2.html部分
<canvas id="canvas" style="background-color: #000"></canvas>