Cắt vải HTML
Phương thức clip()
Phương thức clip()
biến đường dẫn hiện tại thành vùng cắt hiện tại.
Khi một vùng bị cắt bớt, bản vẽ trong tương lai chỉ hiển thị bên trong vùng bị cắt bớt.
Phương thức clip()
có các tham số sau:
Parameter | Description |
---|---|
fillrule | Is a point inside or outside the clipping region? Possible values: nonzero|evenodd |
path | A path to use as the clipping region |
Hãy xem xét một số ví dụ:
Ví dụ
Đầu tiên, tạo một vùng cắt hình tròn. Sau đó vẽ hai hình chữ nhật; chỉ những phần nằm bên trong vùng cắt mới hiển thị:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create a circular
clipping region
ctx.beginPath();
ctx.arc(100, 75, 70, 0, Math.PI * 2);
ctx.clip();
// Draw two rectangles
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = "red";
ctx.fillRect(0, 0,
90, 90);
</script>
Hãy tự mình thử »Ví dụ
Đầu tiên, tạo một vùng cắt hình tam giác. Sau đó vẽ hai hình chữ nhật; chỉ những phần nằm bên trong vùng cắt mới hiển thị:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create a
triangle-shaped clipping region
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.clip();
// Draw two rectangles
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = "red";
ctx.fillRect(0, 0,
90, 90);
</script>
Hãy tự mình thử »Ví dụ
Đầu tiên, tạo một vùng cắt hình tròn. Sau đó vẽ một hình ảnh lên khung vẽ; một lần nữa - chỉ những phần nằm bên trong vùng cắt mới hiển thị:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image =
document.getElementById("scream");
image.addEventListener("load", (e)
=> {
// Create a circular clipping region
ctx.beginPath();
ctx.arc(110, 145, 75, 0, Math.PI * 2);
ctx.clip();
// Draw
image onto canvas
ctx.drawImage(image, 0, 0);
});
</script>
Hãy tự mình thử »Ví dụ
Đầu tiên, chúng ta lưu hai hình chữ nhật vào đối tượng Path2D(), đây sẽ là vùng cắt. Quy tắc "chẵn lẻ" tạo ra một lỗ nơi các hình chữ nhật cắt nhau giao nhau: Nếu chúng ta đã sử dụng quy tắc "khác 0" mặc định thì sẽ không có lỗ:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create clipping path
(two rectangles)
let r = new Path2D();
r.rect(80,10, 45,130);
r.rect(40,50, 120,50);
ctx.clip(r, "evenodd");
// Draw a rectangle
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
</script>
Hãy tự mình thử »Ví dụ
Ví dụ tương tự như trên, nhưng với quy tắc "khác 0" (không tạo ra lỗ nơi các hình chữ nhật cắt giao nhau):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create clipping path
(two rectangles)
let r = new Path2D();
r.rect(80,10, 45,130);
r.rect(40,50, 120,50);
ctx.clip(r, "nonzero");
// Draw a rectangle
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
</script>
Hãy tự mình thử »