javascript - 如何在 html 5 canvas 中删除区域的剪辑

Question

我正在 Canvas 中使用 clip()。

我已经为 clip() 创建了一个区域，如下所示

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

在同一张 Canvas 上画了几次之后，我尝试使用 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())

更改 Canvas 元素宽度将清除上下文状态(并删除裁剪)，但也会删除现有绘图。