Phương pháp clip() trên canvas HTML
Đị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 ý:Một khi đã cắt một vùng nào đó, tất cả các vẽ sau sẽ bị giới hạn trong vùng cắt (không thể truy cập các vùng khác trên canvas). Bạn cũng có thể lưu vùng 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 lại vào bất kỳ thời điểm nào sau này (bằng phương pháp restore()).
Mẫu
Cắt một vùng hình chữ nhật 200*120 pixel từ canvas. Sau đó, vẽ hình chữ nhật xanh. Chỉ phần hình chữ nhật xanh trong vùng cắt mới hiển thị được:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Khu vực hình vuông được cắt
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Vẽ hình vuông xanh sau clip()
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ú:Trình duyệt Internet Explorer 8 và các phiên bản trước không hỗ trợ yếu tố <canvas>.
