HTML canvas clip() 方法
实例
从画布上截取一个 200*120 像素的矩形区域。 然后，绘制一个红色矩形。 只有裁剪区域内的红色矩形部分可见:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Clip a rectangular area
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);
</script>
亲自试一试 »
浏览器支持
表中的数字表示支持该方法的第一个浏览器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| clip() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定义和用法
clip() 方法从原始画布中裁剪出任意形状和大小的区域。
提示:一旦某个区域被剪裁，以后的所有绘图都将被限制在剪裁区域内（无法访问画布上的其他区域）。 但是，您可以在使用 clip() 方法之前使用 save() 方法保存当前画布区域，并在将来的任何时间恢复它（使用 restore() 方法）。
| JavaScript 语法: | context.clip(); |
|---|
❮ Canvas 对象
