HTML5: Vẽ chữ nhật trên <canvas>

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
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.

 

» Tiếp: Vẽ đường thẳng trên <canvas>
« Trước: Cách sử dụng CANVAS
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!