如何在HTML 5画布中移除区域的剪辑？

Question

我正在使用Canvas中的clip()。

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

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

在同一个画布上进行几次绘制后，我尝试使用save()和restore()来移除该区域的剪辑。

但是我犯了错误，无法实现。 因此，请提供一种不使用save()和restore()来移除指定区域剪辑的方法。

- Jaya

---

你能展示一下你正在尝试使用save()和restore()做什么的代码吗？ - Codesmith

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

改变画布元素的宽度或调用 .reset() 将清除上下文状态（并删除剪辑），但也会擦除现有的绘图。

- markE