Thẻ canvas trong HTML

• Bùi Tấn Lực
• 20
• 26/09/2025

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ó, chi tiết như nào hãy cùng chúng tôi phân tích:

Thẻ canvas trong HTML

Chức năng của Thẻ canvas trong HTML

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ó.

Code Thẻ canvas trong HTML

Thẻ canvas bình thường trong HTML

<!--Nếu trình duyệt không hỗ trợ canvas thì sẽ hiện đoạn chữ ở trong-->
<canvas id="myCanvas"  style="border: 1px solid #000; width: 100%; height: 300px;" >Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.</canvas>

Chạy Thử

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

<!--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>

Chạy Thử

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

Phương thức arc() có các tham số sau:

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

x, y: Tọa độ của tâm hình cung (tính bằng pixel).

radius: Bán kính của hình cung (tính bằng pixel).

startAngle: Góc bắt đầu của cung tròn, được tính bằng radian.

endAngle: Góc kết thúc của cung tròn, được tính bằng radian.

anticlockwise (tùy chọn): Một giá trị boolean. Nếu là true, cung tròn được vẽ theo chiều ngược chiều kim đồng hồ; nếu là false (mặc định), cung tròn được vẽ theo chiều kim đồng hồ.

<!--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>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ canvas trong HTML.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thẻ canvas trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn