Canvas clip() 方法
示例
从上下文裁剪一个 200*120 像素的区域。然后，绘制一个红色矩形。只有红色矩形内部裁剪区域内的部分才能看到
不使用 clip()
使用 clip()
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 裁剪一个矩形区域
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制红色矩形
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);
</script>
自己动手试一试 »
描述
clip() 方法可以从原始上下文中裁剪任意大小的区域。
注意
当区域被裁剪后，未来的绘图将仅限于被裁剪的区域。
但是，您可以在使用 clip() 方法之前使用 save() 方法保存上下文设置，并在之后使用 restore() 方法恢复它。
语法
| context.clip(); |
参数
| 无 |
返回值
| 无 |
浏览器支持
<canvas> 元素是 HTML5 标准（2014）。
clip() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
