我想知道如何改变我的Javascript以仅清除掉落的 Sprite ，而不是整个 Canvas (就像目前所做的那样)。
我希望在 Canvas 上放置多个其他(动画) Sprite ，这些 Sprite 不会以我的 function animate 的方式出现。是结构化的。
有没有办法让 Canvas 上有另一个图像/ Sprite 时，它不会受到 function animate. 的影响
我认为这一行需要更改:
ctx.clearRect(0, 0, canvas.width, canvas.height);
虽然我不知道需要在里面放置什么参数。
下落的 Sprite 以 60x60 的大小绘制，但当它们向下落时，我在清理唯一的 Sprite 路径时有点卡住了。
如有任何帮助，我们将不胜感激:)
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>最佳答案
最简单、最快的方法是在当前 Canvas 上覆盖另一个 Canvas ，专门用于您的 Sprite (需要一些 CSS)。将所有 Sprite 放在一个中，将其他所有内容放在另一个中。 animate() 函数中的clearRect() 将仅适用于您的 Sprite Canvas ，而不适用于其他 Canvas 。
否则，您将必须跟踪 Sprite 的位置，并使用clearRect(offsetX, offsetY, 60, 60)以编程方式清除每个60x60矩形。
附注请原谅非格式化的答案......仍在弄清楚
关于javascript - ctx.clearRect Canvas Sprite ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44877735/