Ví dụ về phương thức clip() Code: <!DOCTYPE html> <html> <body> <p>Không có phương thức clip():</p> <canvas id="myCanvas" width="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" width="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> Kết quả:
WebVN Cộng đồng web Việt Nam