画一个下雪的javescript的代码

// 使用 JavaScript 创建一个下雪效果
// 获取 canvas 元素
var canvas = document.getElementById("snow");
// 创建绘图环境
var ctx = canvas.getContext("2d");
// 创建一个数组用于存放雪花
var flakes = [];
// 定义一个函数，每100毫秒绘制一个雪花
function draw(){
// 清除之前绘制过的元素
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 遍历数组中所有的雪花
for(var i = 0; i < flakes.length; i++) {
// 获取当前雪花的坐标
var x = flakes[i].x;
var y = flakes[i].y;
// 绘制雪花
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2);
ctx.fillStyle = "#fff";
ctx.fill();
// 重新设置雪花的坐标
flakes[i].y += flakes[i].vy;
flakes[i].x += flakes[i].vx;
// 如果雪花落到了地面，就从数组中删除它
if(flakes[i].y > canvas.height){
flakes.splice(i, 1);
}
}
// 每隔100毫秒再次绘制
requestAnimationFrame(draw);
}// 创建一个函数用于添加雪花
function addFlakes(){
// 向数组中添加10个雪花
for(var i = 0; i < 10; i++) {
// 随机生成雪花的坐标
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
// 随机生成雪花的速度
var vx = 0.3 + Math.random();
var vy = 1+ Math.random();
// 将雪花的信息存放到数组中
flakes.push({
x: x,
y: y,
vx: vx,
vy: vy
});
}
// 调用 draw 函数
draw();
}// 添加雪花
addFlakes();