Javascript 擦除画布形状的问题

我正在画布上涂鸦

我遇到了这样一个问题：当我用背景色过度渲染来擦除对象时，留下的是原始形状的轮廓

以下是我正在使用的代码

是的，我没有使用clear rect，因为圆可以重叠

---

我相信这是由于抗锯齿。该效果不应出现在不需要抗锯齿的形状上（如矩形）。将擦除圆画大几像素（应该这样做）

如果出现问题：

正如Ray所建议的，您应该考虑使用基于帧的动画，通过使用脏矩形进行优化

---

要做到这一点，只要将矩形标记为脏的，如果其中的任何像素发生了变化（例如由于动画）。然后清除画布上的矩形（

clearRect

），并将其设置为剪切矩形（

clip

）。然后遍历画布上显示的所有元素，并检查它们是否与脏矩形重叠。如果是，则绘制元素，如果不是，则跳到下一个元素。

这可能是由于抗锯齿。让清晰的圆圈稍微大一点（101%的人说）来弥补它。你认为当圆圈重叠时，这会起作用吗？我不太确定。为什么不坚持使用常规的基于帧的动画呢？+1是原因，但是有许多移动的圆可能相互重叠，任何“按画图擦除”背景圆都无法工作。动画应该用帧来完成（或者在必要时用脏矩形进行优化）。基于帧的动画会花费更高的成本擦除所有像素，然后重新绘制比仅仅过度绘制效率要低得多。。除非我遗漏了什么，否则你可以使用脏矩形来最小化所需的重画量。只需将矩形标记为“脏”，清除它并将其设置为剪切矩形。然后检查每个元素是否与该矩形重叠。如果有，就画出来。否则请检查下一个元素。冲洗并重复每一帧。在画布上渲染动画有很多经验，我认为这可能是过早优化的情况。首先清除整个画布并重新绘制整个帧。如果遇到性能问题，请开始寻找优化的方法。在这种情况下，我认为检测脏区域的重叠要比清除和重画整个画布花费更多。

    function erase(eraseColor) {
    ctx.fillStyle = ctx.strokeStyle = eraseColor || "#FFFFFF";
    drawCircle();
    ctx.fillStyle = ctx.strokeStyle = fillColor;
}

function drawCircle() {
    ctx.beginPath();
    ctx.arc(x, y, rad, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
}