像雨一样落在画布上的随机图像（Javascript）

Question

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. 试图模拟随机落下的物体，绘制背景图像是没有问题的，而不是应该模拟雨滴的第二个img。

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下降，但现在我不确定如何循环下降图像x次由变量noOfDrops设置。

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. 如果有人对如何实现它有一些好的想法，我会很感激。

Answer 1

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. 你可能遇到的最大问题是你不能只保持1 x和1 y的值，你必须保持每个图像。 So I modified your loop a bit to push an object on the array that has an x,y, and speed value. 所以我稍微修改了你的循环以推送具有x，y和speed值的数组上的对象。 The speed value gives you nice randomization of the movement, so everything doesn't come down at the same speed: 速度值为您提供了良好的运动随机化，因此一切都不会以相同的速度降低：

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/

像雨一样落在画布上的随机图像（Javascript）

问题描述

1 个解决方案

解决方案1
7 已采纳 2012-10-29 21:22:12

像雨一样落在画布上的随机图像（Javascript）

问题描述

1 个解决方案

解决方案1 7 已采纳 2012-10-29 21:22:12

解决方案1
7 已采纳 2012-10-29 21:22:12