HTML5: Vẽ chữ nhật trên <canvas>
Ta xét ví dụ dưới đây:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Trình duyệt này không hỗ trợ phần tử canvas.
</canvas>
<span id="sp1"></span>
<script>
var i=0;
function draw1(){
var sp=document.getElementById("sp1");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
if(i<150)
i++;
else
return;
ctx.fillRect(0,0,i,i/2);
sp.innerHTML=i+'x'+i/2;
setTimeout("draw1();",50);
}
draw1();
</script>
</body>
</html>
Giải thích ví dụ
Trước tiên ta cần phải tìm đến phần tử <canvas> bằng lệnh:
var c=document.getElementById("myCanvas");
Sau đó dùng phương thức getContext() để yêu cầu hỗ trợ vẽ đồ họa 2 chiều ("2d"):
var ctx=c.getContext("2d");
Hai dòng tiếp theo dùng để vẽ một hình chữ nhật có nền đỏ:
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
Thuộc tính fillStyle có thể là một CSS color, một gradient hoặc một pattern. Giá trị mặc định của fillStyle là "#000000" (black - màu đen).
Phương thức fillRect(x,y,rộng,cao) dùng để vẽ hình chữ nhật.
Tọa độ trong <canvas>
<canvas> là một khung hình chữ nhật, trong đó góc trên trái của canvas có tọa độ (0,0), vì vậy phương thức fillRect() đề cập ở trên có các tham số (0,0,150,75) có nghĩa là hình được vẽ bắt đầu từ tọa độ (0,0) và vẽ hình chữ nhật có kích thước là 150x75.