有没有办法清除canvas元素中的非矩形区域?

时间:2012-05-16 21:53:38

标签: javascript canvas

使用javascript,我在画布上绘制了几个多边形图像。

我想根据用户事件/点击次数,清除画布的一部分(其中一个多边形图像),这是一个不规则的形状,而不是一个矩形。

所以,我不能将clearRect()用于我的目的。

有人能想到我能做到的一种方式吗?

基本上,我想让我的画布的一部分透明,但它不是一个矩形...一旦我有一个区域定义我可以填充()和笔画(),我也不能clear()它...我知道这样的功能不可用。人们在做什么来清除不规则形状的部分?

我对此有点新意,如果这听起来像个愚蠢的问题,请提前道歉。

1 个答案:

答案 0 :(得分:7)

使用ctx.clip()将当前笔划定义为剪裁区域。

请参阅https://developer.mozilla.org/en/Canvas_tutorial/Compositing

我还在http://jsfiddle.net/alnitak/6ABp7/

创建了一个演示

剪切路径是图形状态的一部分,因此您可以.save()以前的状态,设置剪裁,绘制更多内容,然后.restore()原始状态。