Thẻ canvas vẽ hình tròn trong HTML

Thẻ canvas vẽ hình tròn trong HTML

Thẻ canvas vẽ hình tròn trong HTML

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Thẻ canvas vẽ hình tròn trong HTML</title>
</head>
<body>
<h1>Thẻ canvas vẽ hình tròn 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");
// Vẽ hình tròn
ctx.beginPath(); // Bắt đầu một đường dẫn mới
ctx.arc(70, 50, 40, 0, 2 * Math.PI); // Vẽ một cung tròn với các tham số
ctx.fillStyle = "blue"; // Chọn màu tô
ctx.fill(); // Tô màu hình tròn

// Bạn cũng có thể vẽ một đường viền
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx.stroke();
</script>
</body>
</html>
Thẻ canvas vẽ hình tròn trong HTML nằm trong bài viết Thẻ canvas trong HTML