HTML5画布javascript雨动画（如何高效轻松地实现！）

我在画布上尝试了这两种方法，但都没有显示，而且我怀疑它是否有效：/。我想让雨从屏幕上降下来。。想知道做这件事最有效的方法是什么。我是一名动画初学者，非常感谢您的帮助

我怀疑创建一个rain对象是最好的，每个对象的质量都是从屏幕上下来，然后到达顶部，然后是一个数组……可能是画布宽度为0的随机x值和y值，但我不知道如何实现。请帮忙

                xofRain = 20;
        startY = 0;
        ctx.beginPath();
        ctx.moveTo(xofRain, startY);
        ctx.lineTo(xofRain, startY + 20);
        ctx.closePath();
        ctx.fillStyle = "black"; 
        ctx.fill();


     function rain(xofRain){

        startY = canvas.height();

        ctx.moveTo(xofRain, startY);
        ctx.beginPath();
        ctx.lineTo(xofRain, startY + 3);
        ctx.closePath();
        ctx.fillStyle = "blue"; 
        ctx.fill();
    }

---

下面是您的答案，这场雪雨是使用纯HTML5画布创建的，用于实现此动画的技术称为“双缓冲动画”。首先，了解什么是双缓冲动画技术很好

双缓冲技术：这是一种先进的技术，使动画清晰，并减少闪烁。在这项技术中，使用了2个画布，一个显示在网页上以显示结果，另一个用于在备份过程中创建动画屏幕

这将如何帮助充分，假设我们必须创建一个移动次数非常高的动画，如在我们的降雪示例中，有许多雪花以自己的速度移动，因此保持它们移动，我们必须更改每个雪花的位置并在画布上更新它，这是一个非常繁重的处理过程

现在，我们将创建一个缓冲区画布，所有这些更改都发生在该画布上，而不是直接在页面画布上更新每个薄片，我们只需在30毫秒后从缓冲区画布捕获一张图片，并将其显示在真实的画布上

这样，我们的动画将是清晰的，没有闪烁。这是一个活生生的例子

以下是它的代码：

HTML5雨
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}
var=null；
var-context=null；
var bufferCanvas=null；
var bufferCanvasCtx=null；
变量数组=[]；
var-flakeTimer=null；
var maxFlakes=200；//在这里，您可以设置要创建的最大松弛
函数init（）{
//页面上的画布
canvas=document.getElementById（'canvasRain'）；
context=canvas.getContext（“2d”）；
//缓冲画布
bufferCanvas=document.createElement（“画布”）；
bufferCanvasCtx=bufferCanvas.getContext（“2d”）；
bufferCanvasCtx.canvas.width=context.canvas.width；
bufferCanvasCtx.canvas.height=context.canvas.height；
flakeTimer=设置间隔（addFlake，200）；
Draw（）；
设置间隔（动画，30）；
}
函数animate（）{
更新（）；
Draw（）；
}
函数addFlake（）{
flakeArray[flakeArray.length]=新的Flake（）；
if（flakeArray.length==maxFlakes）
清除间隔（计时器）；
}
函数blank（）{
bufferCanvasCtx.fillStyle=“rgba（0,0,0,0.8）”；
fillRect（0，0，bufferCanvasCtx.canvas.width，bufferCanvasCtx.canvas.height）；
}
函数更新（）{
对于（变量i=0；icontext.canvas.height）
数组[i].y=-5；
flakeArray[i].x+=flakeArray[i].漂移；
if（flakeArray[i].x>context.canvas.width）
数组[i].x=0；
}
}
}
函数片（）{
this.x=Math.round（Math.random（）*context.canvas.width）；
y=-10；
this.drift=Math.random（）；
this.speed=Math.round（Math.random（）*5）+1；
this.width=（Math.random（）*3）+2；
this.height=this.width；
}
函数绘图（）{
context.save（）；
空白（）；
对于（变量i=0；i

我不确定什么是“最有效的”。如果是我，我会在WebGL中完成，但我不清楚这是否有效

无论哪种情况，我都会尝试使用无状态公式。为每个雨滴创建和更新状态可以说是缓慢的

const ctx=document.querySelector（“canvas”）.getContext（“2d”）；
常数numRain=200；
函数渲染（时间）{
时间*=0.001；//转换为秒
resizeCanvasToDisplaySize（ctx.canvas）；
const width=ctx.canvas.width；
常数高度=ctx.canvas.height；
ctx.fillStyle=“黑色”；
ctx.fillRect（0，0，宽度，高度）；
重置伪随机（）；
恒速=时间*500；
ctx.fillStyle=“#68F”；
for（设i=0；i