<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雪夜背景</title>
</head>
<body style="margin:0;">
<canvas id="cvs" style="background-color:black;"></canvas>
<script>
const cvs = document.querySelector('#cvs')
const ctx = cvs.getContext('2d')
const {clientWidth: width, clientHeight: height } = document.documentElement
cvs.width = width
cvs.height = height
ctx.fillStyle = '#ffffff'
const bgColors = 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()
bgColors.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()
</script>
</body>
</html>
跟着一个大哥随便写的...
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
