イメージをアニメーションして雨の効果を作成する

Question

HTML5のキャンバスを使用して、JavaScriptを使って簡単なアニメーションを作成しようとしています。それは私がシームレスにアニメートしたい雨滴のイメージです。これはイメージです。

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

これは私が現在、それをアニメーション化しています方法です：

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

でも、私は二つの問題に直面しています。

• イメージをループさせることができません。それは一度落ちるだけで、私はループでこれを持つ必要があるので、キャンバスを離れるときに再びそれが続くでしょう。
• ループを適切にループする方法がわかったら、雨が正確に垂直に落ちないとは限らないという問題があります。画像の雨滴が示すように斜めに落ちる必要があります。

これは、単純な十分なアニメーションではありません。

ここに私のfiddleがあります。すべてのコードが含まれています。どうもありがとう。

PS：私はJavascriptまたはCSSのいずれかの助けを借ります。しかし、私は雨の影響をイメージを使用する必要があります！私は不運にも何かを受け入れることはできません。

Answer 1

ループを別々にupdate（）とdraw（）を呼び出すアニメーションループに分割することをおすすめします。 update（）で状態を更新し、その状態をdraw（）で描画します。

このような何か（ビット不揃いが、あなたはおそらく:)それを改善することができます）：

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>