像雨一樣落在畫布上的隨機圖像（Javascript）

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 個解決方案

解決方案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