HTML 5 Canvas Javascript Regen Animation (wie effizient und einfach zu implementieren!)

Ich habe beide in Canvas ausprobiert und nichts gezeigt, auch ich bezweifle, dass es sogar effizient ist: /. Ich versuche, Regen zu machen, der über den Bildschirm kommt. Ich frage mich, was der effizienteste Weg ist, dies zu tun. Ich bin ein Anfänger in Animation und würde mich sehr über Hilfe freuen.

Ich vermute, dass es am besten wäre, ein Regenobjekt zu erstellen, wobei jedes die Qualität hat, den Bildschirm herunterzufahren und dann nach oben zu gelangen, und dann ein Array mit ihnen Ich weiß nicht, wie ich das umsetzen soll. Bitte helfen Sie!

                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();
    }

Antworten auf die Frage(2)

Ihre Antwort auf die Frage