javascript - ctx.clearRect Canvas Sprite

我想知道如何才能更改Javascript以仅清除掉落的精灵，而不是清除整个画布（如当前那样）。

我希望在画布上放置其他多个（动画）精灵，这些精灵不会随我的function animate的构造方式出现。

有没有一种方法可以使如果画布上还有其他图像/精灵，则不会受到function animate.的影响

我认为这行需要更改：

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

虽然我不知道我需要在其中放置什么参数。
下降的精灵会以60x60的大小绘制，但是当它们向下下落时，这就是清除唯一的精灵路径时我有点卡住的地方。

任何帮助，将不胜感激：）

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");
canvas.width = 1408;
canvas.height = 640;
canvasWidth = canvas.width;
canvasHeight = canvas.height;

var orangeEnemy = new Image();
orangeEnemy.src = "http://www.catholicsun.org/wp-content/uploads/2016/09/cropped-sun-favicon-512x512-270x270.png";
var yellowEnemy = new Image();
yellowEnemy.src = "http://www.clker.com/cliparts/o/S/R/S/h/9/transparent-red-circle-hi.png";

var srcX;
var srcY;
var enemySpeed = 2.75;
var images = [orangeEnemy, yellowEnemy];
var spawnLineY=-50;
var spawnRate=2500;
var spawnRateOfDescent=1.50;
var lastSpawn=-1;
var objects=[];
var startTime=Date.now();
animate();


    function spawnRandomObject() {
        var object = {
                x: Math.random() * (canvas.width - 15),
                y: spawnLineY,
                image: images[Math.floor(Math.random() * images.length)]
            }
        objects.push(object);
    }

    function animate(){
        var time=Date.now();
        if(time>(lastSpawn+spawnRate)){
            lastSpawn=time;
            spawnRandomObject();
        }

        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);


        // move each object down the canvas
        for(var i=0;i<objects.length;i++){
            var object=objects[i];
            object.y += enemySpeed;
            ctx.drawImage(object.image, object.x, object.y, 60, 60);

        }

    }

<html>
<canvas id="canvas" style="border:3px solid"></canvas>
</html>

最佳答案

最简单，最快的方法是在当前画布上覆盖另一个画布，专门用于您的精灵（需要一些CSS）。将您所有的精灵放置在一个中，其他放置在另一个中。然后，animate（）函数中的clearRect（）将仅应用于您的Sprite画布，而不应用于另一个。

否则，您将必须跟踪精灵的位置，并使用clearRect（offsetX，offsetY，60，60）用60x60矩形以编程方式清除每个精灵。

附言请原谅未格式化的答案...仍在弄清楚

关于javascript - ctx.clearRect Canvas Sprite ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44877735/