HTML Canvas 裁剪
clip() 方法
clip() 方法將當前路徑轉換為當前的裁剪區域。
當一個區域被裁剪後，未來的繪製將只在裁剪區域內可見。
clip() 方法具有以下引數：
| 引數 | 描述 |
|---|---|
| fillrule | 一個點是在裁剪區域內部還是外部？可能的值：nonzero|evenodd |
| path | 用作裁剪區域的路徑 |
我們來看一些例子
示例
首先，建立一個圓形裁剪區域。然後繪製兩個矩形；只有位於裁剪區域內的部分才是可見的。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 建立一個圓形裁剪區域
ctx.beginPath();
ctx.arc(100, 75, 70, 0, Math.PI * 2);
ctx.clip();
// 繪製兩個矩形
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 90, 90);
</script>
自己動手試一試 »
示例
首先，建立一個三角形裁剪區域。然後繪製兩個矩形；只有位於裁剪區域內的部分才是可見的。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 建立一個三角形裁剪區域
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.clip();
// 繪製兩個矩形
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 90, 90);
</script>
自己動手試一試 »
示例
首先，建立一個圓形裁剪區域。然後將影像繪製到畫布上；同樣，只有位於裁剪區域內的部分才是可見的。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");
image.addEventListener("load", (e) => {
// 建立一個圓形裁剪區域
ctx.beginPath();
ctx.arc(110, 145, 75, 0, Math.PI * 2);
ctx.clip();
// 將影像繪製到畫布上
ctx.drawImage(image, 0, 0);
});
</script>
自己動手試一試 »
示例
首先，我們將兩個矩形儲存到 Path2D() 物件中，這將是裁剪區域。"evenodd" 規則在裁剪矩形相交的地方建立了一個孔：如果我們使用預設的 "nonzero" 規則，就不會有孔。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 建立裁剪路徑（兩個矩形）
let r = new Path2D();
r.rect(80,10, 45,130);
r.rect(40,50, 120,50);
ctx.clip(r, "evenodd");
// 繪製一個矩形
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
</script>
自己動手試一試 »
示例
與上面的示例相同，但使用了 "nonzero" 規則（在裁剪矩形相交的地方不建立孔）。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 建立裁剪路徑（兩個矩形）
let r = new Path2D();
r.rect(80,10, 45,130);
r.rect(40,50, 120,50);
ctx.clip(r, "nonzero");
// 繪製一個矩形
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
</script>
自己動手試一試 »
