清帆布

Question

我目前正在尝试制作一个雨滴落下的画布，而我唯一的问题是，雨滴在屏幕上产卵后没有清除。因此，基本上，水滴继续填充帆布，直到所有的都是蓝色！落水后我得清理一下帆布。

下面是我的绘图和设置功能：

function draw() {
        drawBackground();

        for (var i=0; i< nOfDrops; i++)
        {
        ctx.drawImage (rainDrops[i].image, rainDrops[i].x, rainDrops[i].y); //The rain drop

        rainDrops[i].y += rainDrops[i].speed; //Set the falling speed
        if (rainDrops[i].y > 450) {  //Repeat the raindrop when it falls out of view
        rainDrops[i].y = -25 //Account for the image size
        rainDrops[i].x = Math.random() * 600;    //Make it appear randomly along the width    
        }

        }
    }

    function setup() {
        var canvas = document.getElementById('canvasRain');

        if (canvas.getContext) {
                ctx = canvas.getContext('2d');

                    imgBg = new Image();
            imgBg.src = "";
        setInterval(draw, 36);
        for (var i = 0; i < nOfDrops; i++) {
            var rainDr = new Object();
            rainDr["image"] =  new Image();
            rainDr.image.src = "rain.png";



            rainDr["x"] = Math.random() * 600;
            rainDr["y"] = Math.random() * 5;
            rainDr["speed"] = 3 + Math.random() * 5;
            rainDrops.push(rainDr);

            }

        }
    }

我很确定我需要清除画布在我的绘画功能，但我不知道确切的地方或如何。如果你需要完整的代码或者有任何问题，请告诉我。谢谢。

Answer 1

使用clearRect()

清理整个画布：

ctx.clearRect(0, 0, canvas.width, canvas.height)

如果你想知道把它放在哪里，你可以把它放在你的绘图功能的开头，所以在每一帧之前它都是清晰的。