0

我的画布上出现雨水效果时遇到了问题。在谷歌上搜索后我发现了这个

    <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');

                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);
        }

    }
}

   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 drawBackground(){  
    ctx.drawImage(imgBg, 0, 0); //Background
}

    </script>

奇怪的是，只要我不将图像源从链接更改为我的 png 文件，代码就可以工作。我得到的只是一遍又一遍地绘制文件的副本，直到画布上满是线条。

请帮忙！

4

1 回答 1

0

似乎由于某种原因您的背景没有呈现。

如果您不想有任何背景，则必须在画布之前清除画布，然后再在新位置绘制水滴，否则画布会泛滥:)

将：替换ctx.drawImage(imgBg, 0, 0);
为：clearRect(0, 0, width, height)

另请参阅这个简短的演示。

于 2013-05-18T15:37:28.403 回答