image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#myDiv{
width: 500px;
height: 500px;
background-color: black;
}
</style>
</head>
<body>
<canvas id='myDiv' height="500" width="500"></canvas>
<script type="text/javascript">
var c=document.getElementById('myDiv')
var ctx=c.getContext("2d");
var x=10
var y=10
var snows=[]
var snowsLength=parseInt(Math.random()*500)
console.log(snowsLength)
for(let a=0;a<snowsLength;a++){
snows.push({
x: Math.random()*500,
y: Math.random()*500,
size: 5*Math.random()
})
}
snows.forEach(item=>{
ctx.beginPath();
ctx.arc(item.x,item.y,item.size,0,2*Math.PI);
ctx.fillStyle="white";
// ctx.globalAlpha=Math.random()
ctx.fill();
})
function down(){
setInterval(()=>{
ctx.clearRect(0, 0, 500, 500);
snows.map(item=>{
// item.x=item.x+Math.floor((Math.random() - 0.5) * 10 ) // [-5,5)
item.y=item.y+Math.random()+1
if(item.y>=500){
item.y=Math.random()
}
ctx.beginPath();
ctx.arc(item.x,item.y,item.size,0,2*Math.PI);
// 加上此行会出现闪烁的效果，闪烁下坠也不错
// ctx.globalAlpha=Math.random()
ctx.fillStyle="pink";
ctx.fill();
})
},100)
}
down()
</script>
</body>
</html>
