Phương thức HTML canvas clip ()
Thí dụ
Kẹp một vùng hình chữ nhật có kích thước 200 * 120 pixel từ canvas. Sau đó, vẽ một hình chữ nhật màu đỏ. Chỉ phần của hình chữ nhật màu đỏ nằm bên trong khu vực bị cắt được hiển thị:
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);
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương pháp này.
| Method | |||||
|---|---|---|---|---|---|
| clip() | Yes | 9.0 | Yes | Yes | Yes |
Định nghĩa và Cách sử dụng
Phương thức clip () cắt một vùng có hình dạng và kích thước bất kỳ từ canvas gốc.
Mẹo: Khi một vùng được cắt bớt, tất cả các bản vẽ trong tương lai sẽ bị giới hạn trong vùng bị cắt (không có quyền truy cập vào các vùng khác trên canvas). Tuy nhiên, bạn có thể lưu vùng canvas hiện tại bằng phương thức save () trước khi sử dụng phương thức clip () và khôi phục nó (bằng phương thức restore ()) bất kỳ lúc nào trong tương lai.
| Cú pháp JavaScript: | ngữ cảnh .clip (); |
|---|
❮ Tham chiếu HTML Canvas