擦除画布形状的问题

Question

我正在使用画布涂鸦，

我遇到了一个问题，当我用背景颜色透过它擦除对象时，我留下了原始形状的轮廓。

以下是我正在使用的代码

并且我没有使用清晰的矩形，因为圆圈可以重叠。

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

Answer 1

我认为这是由于抗锯齿造成的。效果不应出现在不需要消除锯齿的形状上（如矩形）。画一个大一些像素的擦除圆（一个应该做）。

如果出现问题：you cannot turn off anti-aliasing for canvas。

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

要执行此操作，您只需将矩形标记为脏，如果其中的任何像素已更改（例如由于动画）。然后清除画布上的矩形（clearRect）并将其设置为剪切矩形（clip）。然后迭代画布上显示的所有元素，并检查它们是否与脏矩形重叠。如果是这样，你绘制元素，如果没有，你跳到下一个元素。