Javascript ctx.clearRect画布精灵

我想知道如何改变Javascript，只清除掉掉下来的精灵，而不是像现在这样清除整个画布

我希望在画布上放置多个其他动画精灵，这些精灵不会以我的函数animate的结构方式出现

是否有一种方法可以使画布上存在另一个图像/精灵时，它不会受到“动画”功能的影响

我认为这一行需要改变：

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

虽然我不知道我需要在里面放置什么参数。 下落的精灵绘制的大小为60x60，但当它们向下下落时，我有点难以清理精灵路径

如有任何帮助，将不胜感激：

var canvas=document.getElementByIdcanvas， ctx=canvas.getContext2d； 画布宽度=1408； canvas.height=640； 画布宽度=canvas.width； 画布高度=canvas.height； var orangenemy=新图像； orangeEnemy.src=http://www.catholicsun.org/wp-content/uploads/2016/09/cropped-sun-favicon-512x512-270x270.png; var黄色敌人=新图像； YellowDebuy.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，YellowDebustion]； var-spawnLineY=-50； var产卵率=2500； var spawnRateOfDescent=1.50； var lastpawn=-1； var对象=[]； var startTime=Date.now； 使有生气 函数对象{ 变量对象={ x:Math.random*canvas.width-15， y:是的， image:images[Math.floorMath.random*images.length] } objects.pushobject； } 函数动画{ var time=Date.now； iftime>lastpawn+spawnerate{ lastpawn=时间； 生成随机对象； } 请求动画帧动画； ctx.clearRect0，0，canvas.width，canvas.height； //沿画布向下移动每个对象

---

forvar i=0；i最简单、最快速的方法是在当前画布上覆盖另一个画布，特别是您的精灵，需要一点CSS。将所有精灵放在一个画布上，其他所有精灵放在另一个画布上。动画功能中的clearRect将只应用于您的精灵画布，而不是另一个

否则，您将必须跟踪精灵的位置，并使用clearRectoffsetX、offsetY、60、60以60x60矩形编程清除每个精灵

另外，请原谅未格式化的答案…仍在计算中

为性能清除一次。 清除整个画布并重新绘制精灵会更好。使用上一个位置，检查重叠，然后依次清除每个精灵，确保不清除现有精灵将比一次清除屏幕花费更多的CPU周期

clear screen（清除屏幕）功能非常快，是在硬件上完成的，下面是Firefox上的性能测试结果。Firefox是目前清除65K像素最快的渲染器，只需对整个区域进行一次调用，然后每季度进行4次调用，然后每清除16次调用16次。µs是1/1000000秒

Each test clears 256*256 pixels Each sample is 100 tests
'Clear 1/1' Mean time: 213µs ±4µs 1396 samples
'Clear 4/4' Mean time: 1235µs ±14µs 1390 samples     
'Clear 16/16' Mean time: 4507µs ±42µs 1405 samples

正如您所看到的，清除65K像素最好在一次调用中完成，而实际的javascript调用要增加大约100µs

在Firefox上，要清除的像素数不影响调用clearRect的执行时间，调用clearRect0,0256256和clearRect0,0,16,16都需要约2µs

---

除了速度，尝试清除每个精灵重叠的动画精灵变得极其复杂，可能会导致100秒的清除调用，而只有12个精灵。这是由于重叠。

嘿，谢谢你的建议。我曾考虑过第二个画布，但不完全确定它在画布g的上下文中如何工作ame我必须做。我遵循了如何在堆栈上绘制第二个画布，其中显示了示例CSS对齐等。我的测试画布工作得很好。我甚至成功地实现了碰撞，我不确定两个画布是否会发生碰撞，你可以说我不太懂JS！无论如何，谢谢你的帮助！这里有一些有趣的计算；谢谢你解释哼哼。你证实了清除和重画移动元素有多困难！我接着只创建了第二块画布，这样我就可以为一个单独的精灵设置动画。