3

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

我可以让下降以随机 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>

如果有人对如何实现它有一些好的想法，我将不胜感激。

4

1 回答 1

7

您的循环实际上非常接近。您将遇到的最大问题是您不能只保持 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();

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

于 2012-10-29T21:22:12.660 回答