javascript - 清理 Canvas

Question

这个问题已经有答案了:

How to clear the canvas for redrawing (25 个回答)

已关闭 10 个月前。

我目前正在尝试创建一个带有雨滴落下的 Canvas ，我唯一的问题是雨滴在屏幕上生成后没有清除。所以基本上，水滴会继续填满 Canvas ，直到全部变成蓝色!水滴落下后我需要清理 Canvas 。

这是我的绘制和设置函数:

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

            }

        }
    }

我很确定我需要在绘图函数中清除 Canvas ，但我不确定具体在哪里或如何清除。如果您需要完整代码或有任何疑问，请告诉我。谢谢。

Answer 1

使用clearRect()

清除整个 Canvas :

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

如果您想知道将其放在哪里，可以将其放在绘图函数的开头，这样它就会在每一帧之前清除。