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 參考
