Thẻ canvas vẽ hình vuông, chữ nhật trong HTML

Thẻ canvas vẽ hình vuông, chữ nhật trong HTML

Thẻ canvas vẽ hình vuông, chữ nhật trong HTML

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Thẻ canvas vẽ hình vuông, chữ nhật trong HTML</title>
</head>
<body>
<h1>Thẻ canvas vẽ hình vuông, chữ nhật trong HTML</h1>
<p>Thẻ canvas trong HTML kết hợp với script để vẽ hình vuông, hình tròn, hình chữ nhật, đường thẳng, hình ảnh, văn bản,... lên chính nó:</p>

<!--Nếu trình duyệt không hỗ trợ canvas thì sẽ hiện đoạn chữ ở trong-->
<!--Chiều rộng canvas phải gấp đôi chiều cao-->
<canvas id="canvasid"  style="border: 1px solid #000; width: 400px; height: 200px;" >Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.</canvas>
<script>
// Lấy id canvasid
let canvasid = document.getElementById("canvasid");
// Lấy ngữ cảnh vẽ 2D
let ctx = canvasid.getContext("2d");
//Hình chữ nhật
ctx.fillStyle = "#FF0000";
//:left:5px;top:10px;width:100px;height:50px
ctx.fillRect(5, 10, 100, 50);
//Hình vuông
ctx.fillStyle = "#FF0000";
//:left:5px;top:70px;width:50px;height:50px
ctx.fillRect(5, 70, 50, 50);
</script>
</body>
</html>
Thẻ canvas vẽ hình vuông, chữ nhật trong HTML nằm trong bài viết Thẻ canvas trong HTML