19/09/2018, 14:59
clip() trong Canvas
Cắt một khi vực hình chữ nhật có kích thước 200*120 pixels từ canvas. Sau đó, vẽ một hình chữ nhật màu đỏ. Chỉ những phần của hình chữ nhật màu đỏ nằm trong khu vực cắt được hiển thị: Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: ...
Cắt một khi vực hình chữ nhật có kích thước 200*120 pixels từ canvas. Sau đó, vẽ một hình chữ nhật màu đỏ. Chỉ những phần của hình chữ nhật màu đỏ nằm trong khu vực cắt được hiển thị:
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <body> <p>Không có phương thức clip():</p> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Vẽ một hình chữ nhật ctx.rect(50, 20, 200, 120); ctx.stroke(); // Vẽ hình chữ nhật màu đỏ ctx.fillStyle = "red"; ctx.fillRect(0, 0, 150, 100); </script> <p>Với phương thức clip():</p> <canvas id="myCanvas2" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> var c = document.getElementById("myCanvas2"); var ctx = c.getContext("2d"); // Cắt một khu vực hình chữ nhật ctx.rect(50, 20, 200, 120); ctx.stroke(); ctx.clip(); // Vẽ hình chữ nhật màu đỏ sau khi dùng clip() ctx.fillStyle = "red"; ctx.fillRect(0, 0, 150, 100); </script> </body> </html> |
Demo
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| clip() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức clip() sẽ cắt một khu vực với bất kỳ hình dạng và kích thước nào từ canvas gốc.
Mẹo: Một khi đã được cắt, tất cả tính năng vẽ sẽ chỉ hiển thị trong khu vực cắt (không thể truy cập sang 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 cách sử dụng phương thức save() trước khi sử dụng phương thức clip() và và khôi phục lại (với phương thức restore()) bất cứ khi nào muốn.
Cú pháp JavaScript: context.clip();
