我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。
教程介绍、教程目录等能在README里查阅。
介绍
| 方法 | 描述 |
|---|---|
| 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);
