Phương pháp Canvas clip()
Định nghĩa và cách sử dụng
clip() Phương pháp từ canvas gốc cắt bất kỳ hình dạng và kích thước nào.
Lưu ý:Khi cắt một khu vực nào đó, tất cả các vẽ sau đó sẽ bị giới hạn trong khu vực được cắt (không thể truy cập các khu vực khác trên canvas). Bạn cũng có thể lưu khu vực canvas hiện tại bằng phương pháp save() trước khi sử dụng phương pháp clip() và khôi phục nó vào bất kỳ thời điểm nào bằng phương pháp restore().
Mô hình
Cắt khu vực hình vuông 200*120 pixel từ canvas. Sau đó, vẽ hình vuông xanh. Chỉ phần hình vuông xanh trong khu vực được cắt mới hiển thị được:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Cắt khu vực hình vuông
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Trong clip() sau vẽ hình vuông xanh
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Cú pháp
context.clip();
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ yếu tố <canvas>.
