HTML5 Canvas - Vẽ hình chữ nhật
Có ba phương thức để vẽ các hình chữ nhật trên canvas:
| STT | Phương thức và Miêu tả |
|---|---|
| 1 | fillRect(x,y,width,height) Phương thức này vẽ một hình chữ nhật được fill. |
| 2 | strokeRect(x,y,width,height) Phương thức này vẽ một outline hình chữ nhật |
| 3 | clearRect(x,y,width,height) Phương thức này xóa khu vực đã xác định và làm nó hoàn toàn trong suốt |
Ở đây x và y xác định vị trí trên canvas (liên quan tới điểm gốc) của góc trên cùng bên trái của hình chữ nhật và width và height là độ rộng và chiều cao của hình chữ nhật.
Ví dụ
Sau đây là một ví dụ đơn giản mà sử dụng các phương thức trên để vẽ một hình chữ nhật đẹp.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function drawShape(){
// Get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
Nó sẽ vẽ hình chữ nhật sau:
Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học HTML5 phổ biến khác tại vietjack.com:
