随机图像在画布中像雨一样落下（Javascript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13129479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Random images falling like rain in canvas (Javascript)
提问by Angel
So I have been playing around with canvas. Trying to simulate random falling objects, drawing the background image is no problem and not the 2nd img that is supposed to simulate a rain drop.
所以我一直在玩画布。尝试模拟随机落下的物体，绘制背景图像没有问题，而不是应该模拟雨滴的第二个图像。
I can get the drop to come down at a random x but now I am not really sure on how to loop the drop image x times set by the variable noOfDrops.
我可以让下落以随机 x 下降，但现在我不太确定如何循环由变量 noOfDrops 设置的下落图像 x 次。
I left my loop commented out, the working code with just one drop falling randomly is:
我把我的循环注释掉了，只有一滴随机掉落的工作代码是：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Regn</title>
<script type="text/javascript">
var ctx;
var imgBg;
var imgDrops;
var x = 0;
var y = 0;
var noOfDrops = 50;
var fallingDrops = [];
function setup() {
var canvas = document.getElementById('canvasRegn');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
setInterval('draw();', 36);
imgBg = new Image();
imgBg.src = 'dimma.jpg';
imgDrops = new Image();
imgDrops.src = 'drop.png';
/*for (var i = 0; i < noOfDrops; i++) {
var fallingDr = imgDrops[i];
fallingDr.x = Math.random() * 600;
fallingDrops.push(fallingDr);
}*/
}
}
function draw() {
drawBackground();
ctx.drawImage (imgDrops, x, y); //The rain drop
y += 3; //Set the falling speed
if (y > 450) { //Repeat the raindrop when it falls out of view
y = -25 //Account for the image size
x = Math.random() * 600; //Make it appear randomly along the width
}
}
function drawBackground(){
ctx.drawImage(imgBg, 0, 0); //Background
}
</script>
</head>
<body onload="setup();">
<canvas id="canvasRegn" width="600" height="450"style="margin:100px;"></canvas>
</body>
</html>
If anyone has some good ideas on how to implement that, I would appreciate it alot.
如果有人对如何实现它有一些好主意，我将不胜感激。
回答by John Koerner
Your loop is actually pretty close. The biggest problem you would have is that you can't just maintain 1 x and 1 y value, you have to maintain that per image. So I modified your loop a bit to push an object on the array that has an x,y, and speed value. The speed value gives you nice randomization of the movement, so everything doesn't come down at the same speed:
你的循环实际上非常接近。你会遇到的最大问题是你不能只维护 1 x 和 1 y 值，你必须维护每个图像。所以我稍微修改了你的循环，将一个对象推送到具有 x、y 和速度值的数组上。速度值为您提供了很好的运动随机化，因此一切都不会以相同的速度下降：
var ctx;
var imgBg;
var imgDrops;
var x = 0;
var y = 0;
var noOfDrops = 50;
var fallingDrops = [];
function drawBackground(){
ctx.drawImage(imgBg, 0, 0); //Background
}
function draw() {
drawBackground();
for (var i=0; i< noOfDrops; i++)
{
ctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y); //The rain drop
fallingDrops[i].y += fallingDrops[i].speed; //Set the falling speed
if (fallingDrops[i].y > 450) { //Repeat the raindrop when it falls out of view
fallingDrops[i].y = -25 //Account for the image size
fallingDrops[i].x = Math.random() * 600; //Make it appear randomly along the width
}
}
}
function setup() {
var canvas = document.getElementById('canvasRegn');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
imgBg = new Image();
imgBg.src = "http://lorempixel.com/600/600/sports/";
setInterval(draw, 36);
for (var i = 0; i < noOfDrops; i++) {
var fallingDr = new Object();
fallingDr["image"] = new Image();
fallingDr.image.src = 'http://lorempixel.com/10/10/sports/';
fallingDr["x"] = Math.random() * 600;
fallingDr["y"] = Math.random() * 5;
fallingDr["speed"] = 3 + Math.random() * 5;
fallingDrops.push(fallingDr);
}
}
}
setup();
Here is a fiddle demo: http://jsfiddle.net/L4Qfb/21/
这是一个小提琴演示：http: //jsfiddle.net/L4Qfb/21/
