HTML5: Vẽ chữ nhật trên <canvas>
Giải phóng thời gian, khai phóng năng lực
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.
Giải phóng thời gian, khai phóng năng lực