Canvas 图像裁剪
裁剪用于隐藏部分我们不想看到的图形
Canvas 中的裁剪和 Photoshop 中的裁剪不一样，Photoshop 中的裁剪针对的是图形，而 Canvas 中的裁剪针对的是画布本身
Canvas 中的裁剪只有一种方法，就是根据路径来裁剪
比如我们有一个画布，画布上有一张图片和一个五角星的路径
现在我们只想显示五角星里的图片，那么在 Canvas 裁剪就会得到
为什么五角都有白色区域，那是因为我们图片不够大，露出了屏幕了..
Canvas 提供了 clip() 方法来做到这一点
Canva clip() 方法
ctx.clip() 方法将当前路径设置为剪切路径
语法
void ctx.clip(); void ctx.clip(fillRule); void ctx.clip(path, fillRule);
| 参数 | 说明 |
|---|---|
| fillRule | 裁剪算法，用于设置判断一个点是在路径内还是在路径外，可选的值有 "nonzero": 非零环绕原则，默认的原则 "evenodd": 奇偶环绕原则 |
| path | 需要剪切的 Path2D 路径 |
fillRule 详细的介绍，可以参考 Canvas 填充路径 fill()
默认情况下，canvas 有一个与它自身一样大的裁切路径（也就是没有裁切效果）
如果和上一章节介绍的 globalCompositeOperation 属性作一比较，它可以实现与 source-in 和 source-atop 差不多的效果
最重要的区别是裁切路径不会在 canvas 上绘制东西，而且它永远不受新图形的影响
这些特性使得它在特定区域里绘制图形时相当好用
范例
我们使用 clip() 方法来实现一个 1/4 圆效果
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-1" width="300" height="200"> </canvas> <script> var c = document.getElementById("canvas-1"); var ctx = c.getContext("2d"); ctx.arc(100, 100, 75, 0, Math.PI*2, false); ctx.clip(); ctx.fillRect(0, 0, 100,100); ctx.fillStyle="green"; ctx.fillRect(100, 100, 100,100); ctx.fillStyle="red"; ctx.fillRect(40, 40, 30,30); </script>
运行结果如下
使用起来是不是很简单，简直不要太好
其实就是先画一个路径，然后调用 clip() 说我要裁剪接下来的图形，而且终身有效
如果不需要了，那么可以在调用 clip() 前先调用 save() 保存状态，然后再使用完后调用 restore() 恢复状态
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-2" width="300" height="200"> </canvas> <script> var c2 = document.getElementById("canvas-2"); var ctx2 = c2.getContext("2d"); ctx2.save(); ctx2.arc(100, 100, 75, 0, Math.PI*2, false); ctx2.clip(); ctx2.fillRect(0, 0, 100,100); ctx2.fillStyle="green"; ctx2.fillRect(100, 100, 100,100); ctx2.restore(); ctx2.fillStyle="red"; ctx2.fillRect(40, 40, 30,30); </script>
运行结果如下