Анимация изображения для создания эффекта дождя

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>