動畫圖像創建雨效

Question

我想用JavaScript使用HTML5畫布編寫一個足夠簡單的動畫。這是我想要無縫動畫的雨滴圖像。這是圖像：

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>

this.y`開始於`0`，並increasing`this