话不多说先看图：
代码copy过去直接看效果：
<!DOCTYPE html> <html lang="en" style="margin: 0;padding: 0;width: 100%;height: 100%;"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="margin: 0;padding: 0;width: 100%;height: 100%;"> <canvas id="cvs" style="background-color: black;display: block"></canvas> </body> <script> let cvs = document.getElementById("cvs"); let context = cvs.getContext("2d"); let {clientWidth: width, clientHeight: height} = document.documentElement cvs.width=width cvs.height=height context.fillStyle="#ffffff" const bgColors=Array.from(new Array(400)).map(v=>{ return { x:Math.random()*width, y:Math.random()*height, speed:Math.random()*2.5, w:2*Math.random()+1, h:2*Math.random()+1 } }) const render=()=>{ context.clearRect(0,0,width,height) bgColors.forEach(v=>{ v.y=v.y>height?0:v.y+v.speed // context.fillText('*',v.x,v.y,200); context.fillRect(v.x,v.y,v.w,v.w) }) requestAnimationFrame(render) } render() </script> </html>
