如何在 html 5 畫布中刪除區域的剪輯

Question

我正在畫布中使用clip() 。

我已經為clip()創建了一個區域，如下所示

this.svgRenderer.ctx.rect(positionX, positionY, Width, Height);
this.svgRenderer.ctx.clip();

在同一畫布上繪制幾次之后，我嘗試使用save()和restore()刪除該區域的剪輯。

但我犯了錯誤，無法理解。 所以建議任何其他方法來刪除指定區域的剪輯，而不使用save()和restore()

Answer 1

.clip是永久的上下文狀態更改。

它只能通過將其包裝在.save和.restore中來刪除。

ctx.save();
ctx.clip(); // assuming the clipping path was already declared
// draw whatever needs to be clipped
ctx.restore(); // reset the clipping region
               // (and any other attributes that have been modified since .save())

更改畫布元素寬度將清除上下文狀態（並刪除剪輯），但也會刪除現有繪圖。