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

本文介绍了随机图像落在画布上的雨（Javascript）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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.

我可以得到下降下面的随机x，但现在我不知道如何循环由drop变量noOfDrops设置的x倍。

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.

我离开我的循环注释掉，工作代码只有一滴下降随机是：

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.

推荐答案

你的循环实际上非常接近。你会遇到的最大的问题是，你不能只保持1 x和1 y的价值，你必须保持每个图像。所以我修改了你的循环，以推动数组上有一个x，y和速度值的对象。速度值给你很好的随机运动，所以一切都不会以同样的速度下来：

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:

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/

这篇关于随机图像落在画布上的雨（Javascript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！