HTML Tag: canvas

Thẻ <canvas> được sử dụng để vẽ đồ họa ngay trên trang, thông qua viêc sử dụng các srcipting( thường là javascrippt).

Thẻ <canvas> chỉ là một vùng chứa đồ họa, bạn phải sử dụng một tập lệnh để vẽ đồ họa.

Cách sử dụng thẻ <canvas>

Ví dụ: sử dụng thẻ <canvas> để vẽ.

Code RUN
<!DOCTYPE html>
<html>
    <head>
    	<title>Học lập trình miễn phí tại freetuts.net</title>
		<meta charset="utf-8">
	</head>
    <body>
    	<h1>Học lập trình miễn phí tại freetuts.net</h1>

    	<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

		<script>

			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.fillStyle = "#FF0000";
			ctx.fillRect(0, 0, 80, 100);

		</script>

		<p>
			<strong>Note:</strong> The canvas tag is not supported in Internet 
			Explorer 8 and earlier versions.
		</p>
    </body>
</html>

Thuộc tính của thẻ <canvas>

  • height - chiều cao của cùng đồ họa.
  • width - độ rộng của vùng đồ họa.

Trình duyệt hỗ trợ

  • Chrome
  • Firefox
  • IE
  • Safari
  • Opera

Tham khảo: w3schools.com

Nguồn: freetuts.net