动画图像以创建雨效果

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) {
	position.x += (70 * gameTime.diff / 1000);
	position.y += (110 * gameTime.diff / 1000);
	if (position.x > canvas.width) {
		position.x = 0;
	}

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

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

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

requestAnimationFrame(loop);

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