Question

所以我一直在玩帆布。试图模拟随机落下的物体，绘制背景图像是没有问题的，而不是第二个模拟雨滴的img。

我可以让随机x下降，但现在我不确定如何循环下降图像x次由变量noOfDrops设置。

我把循环注释掉了，只有一滴掉落的工作代码就是：

<!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>

如果有人对如何实现这一点有一些好的想法，我会很感激。

Answer 1

你的循环实际上非常接近。你可能遇到的最大问题是你不能只保持1 x和1 y的值，你必须保持每个图像。所以我稍微修改了你的循环以推送具有x，y和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();

这是一个小提琴演示：http://jsfiddle.net/L4Qfb/21/

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

1 个答案: