Ein Bild animieren, um Regeneffekt zu erzeugen

Question

Ich versuche, eine einfach genug Animation mit Javascript mit HTML5 Canvas zu schreiben. Es ist ein Bild von Regentropfen, die ich nahtlos animieren möchte. Dies ist das Bild:

https://s31.postimg.org/475z12nyj/raindrops.png

Dies ist, wie ich zur Zeit bin es Animieren:

function Background() { 
     this.x = 0, this.y = 0, this.w = bg.width, this.h = bg.height; 
     this.render = function() { 
      ctx.drawImage(bg, 0, this.y++); 
      if (this.y <= -199) { //If image moves out of canvas, reset position to 0 
       this.y = 0; 
      } 
     } 
    } 

ich allerdings zwei Fragen, mit denen.

• Ich kann das Bild überhaupt nicht zur Schleife bekommen. Es fällt nur einmal, ich muss das auf einer Schleife haben, damit es wieder weitergeht, wenn es beginnt, die Leinwand zu verlassen.
• Sobald ich weiß, wie man es richtig loop, gibt es das Problem, dass der Regen nicht genau vertikal fallen soll. Es muss diagonal herunterfallen, wie die Regentropfen im Bild vermuten lassen.

Dies ist, wo es aufhört, eine einfache genug Animation zu sein.

Hier ist mein fiddle, es enthält alle meine Code. Danke vielmals.

PS: Ich nehme jede Hilfe mit entweder Javascript oder CSS, die ich bekommen kann. Aber ich brauche den Regeneffekt, um nur das Bild zu verwenden! Ich kann leider nichts anderes akzeptieren.

Answer 1

Ich würde empfehlen, Ihre Schleife in eine Animationsschleife aufzuteilen, die update() und draw() separat aufruft. Aktualisieren Sie Ihren Status in update() und rendern Sie diesen Zustand dann in draw().

Etwas Ähnliches (bisschen zackig, aber man kann es vielleicht besser machen :)):

var lastTick = 0; 
 
var position = { x:0, y:0 }; 
 
var bg = document.getElementById('bg'); 
 
var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
function update(gameTime) { 
 
\t position.x += (70 * gameTime.diff/1000); 
 
\t position.y += (110 * gameTime.diff/1000); 
 
\t if (position.x > canvas.width) { 
 
\t \t position.x = 0; 
 
\t } 
 

 
\t if (position.y > canvas.height) { 
 
\t \t position.y = 0; 
 
\t } 
 
} 
 

 
function draw(gameTime) { 
 
\t ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
\t ctx.drawImage(bg, position.x, position.y, canvas.width, canvas.height); 
 
\t ctx.drawImage(bg, position.x - canvas.width, position.y, canvas.width, canvas.height); 
 
\t ctx.drawImage(bg, position.x, position.y - canvas.height, canvas.width, canvas.height); 
 
\t ctx.drawImage(bg, position.x - canvas.width, position.y - canvas.height, canvas.width, canvas.height); 
 
} 
 

 
function loop(tick) { 
 
\t var diff = tick - lastTick; 
 
\t var gameTime = { tick:tick, diff:diff }; 
 
\t update(gameTime); 
 
\t draw(gameTime); 
 
\t requestAnimationFrame(loop); 
 
\t lastTick = tick; 
 
} 
 

 
requestAnimationFrame(loop);

<title>Rain</title> 
 
<meta charset="UTF-8"> 
 
<style> 
 
\t canvas { 
 
\t \t width:100vw; 
 
\t \t height:100vh; 
 
\t } 
 
</style> 
 
<img id="bg" src="https://s31.postimg.org/475z12nyj/raindrops.png" style="display:none;"> 
 
<canvas id="canvas"><h1>Canvas not supported</h1></canvas>