【绘制】HTML5 Canvas 剪辑区域clip()的使用

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

 

介绍

clip()方法的用法

方法	描述
clip()	将剪辑区域设置为当前剪辑区域与当前路径的交集。在第一次调用clip()方法之前，剪辑区域的大小与整个canvas一致。 因为clip()方法会将剪辑区域设置为当前剪辑区域与当前路径的交集，所以该方法一般都是嵌入save（）和restore（）之间，否则，剪辑区域会越变越小，这通常不是我们想要的效果。

CanvasRenderingContext2D.clip() 是 Canvas 2D API 将当前创建的路径设置为当前剪切路径的方法。

简单来说，就是从原始画布中剪切任意形状和尺寸。

提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

示例

我们首先按照正常的写法画两个矩形：

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 绘制一个路径并描边
ctx.rect(50,20,200,120);
ctx.stroke();

//ctx.clip();

// 绘制一个绿色路径（和上次矩形位置有交叉）
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
</script> 

 

上面代码注释了clip()，如果我们把注释恢复成代码 

操作剪辑区域的效果实际上就是在路径的交集中操作，而不影响其他的区域。 

这里我联想到了Photoshop中的“选区交叉”功能，特地使用Photoshop演示这个效果：

 实现橡皮擦

使用clip（）实现橡皮擦

橡皮擦实际上就是在清除剪辑区域内的图像。

使用clip()之后，因为所有的绘图操作都会在剪辑区域进行，所以当设定好剪辑区域的橡皮擦尺寸后，清除全部图像，表现上则清除剪辑区域的图像。

context.rect(mouse.x - 10, mouse.y - 10, 20, 20);
context.clip();
context.clearRect(0, 0, canvas.width, canvas.height);

在线演示 详细代码

不使clip()实现橡皮擦

如果不使用clip()，则直接一步步根据鼠标位置清除对应区域的图像即可，关键步骤如下，这里不再展示详细代码。

context.clearRect(mouse.x - 10, mouse.y - 10, 20, 20);