刪除畫布形狀的問題

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

我相信這是由於抗鋸齒。 該效果不應出現在不需要抗鋸齒的形狀上（如矩形）。 畫一個更大的擦除圓幾像素（應該做一個）。

萬一出現問題： 您不能關閉canvas的抗鋸齒功能 。

正如Ray所建議的那樣，您應該考慮使用基於幀的動畫，該動畫通過使用臟矩形進行了優化。

為此，您只需將矩形標記為臟的（如果矩形中的任何像素已更改）（例如，由於動畫）。 然后，清除畫布上的矩形（ clearRect ）並將其設置為剪貼矩形（ clip ）。 然后，您遍歷畫布上顯示的所有元素，並檢查它們是否與臟矩形重疊。 如果是這樣，則繪制該元素，否則，請跳到下一個元素。