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

Trình soạn thảo - Thẻ canvas vẽ hình vuông, chữ nhật trong HTML

Kết quả - 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
  • ★★★★★ ★★★★★