Đối tượng Canvas của HTML DOM

Phần tử <canvas> định nghĩa khu vực bitmap trong trang HTML.

API Canvas cho phép JavaScript vẽ các hình ảnh trên khung vẽ.

API Canvas cho phép JavaScript vẽ các hình ảnh trên khung vẽ.

Thêm Canvas vào HTML

Bạn có thể sử dụng thẻ <canvas> để thêm phần tử canvas vào bất kỳ vị trí nào trong trang HTML:

Mô hình

<canvas id="myCanvas" width="300" height="150"></canvas>

Thử ngay

Cách truy cập vào phần tử Canvas

Bạn có thể sử dụng phương pháp HTML DOM được gọi là getElementById() để truy cập vào phần tử <canvas>:

const myCanvas = document.getElementById("myCanvas");

Để vẽ trên canvas, bạn cần tạo đối tượng ngữ cảnh 2D:

const ctx = myCanvas.getContext("2d");

Ghi chú

HTML <canvas> không có chức năng vẽ.

Bạn phải sử dụng JavaScript để vẽ bất kỳ hình ảnh nào.

Phương pháp getContext() trả về một đối tượng có các công cụ vẽ (phương pháp).

Vẽ trên canvas

Sau khi tạo đối tượng ngữ cảnh 2D, bạn có thể vẽ trên canvas.

Phương pháp fillRect() dưới đây đã vẽ một hình vuông đen, góc trên bên trái của nó ở vị trí 20,20. Hình vuông có chiều rộng 150 pixel và chiều cao 100 pixel:

Mô hình

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Thử ngay

Sử dụng màu sắc

Thuộc tính fillStyle thiết lập màu sắc lấp đầy đối tượng vẽ.

Mô hình

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Thử ngay

Bạn cũng có thể sử dụng phương pháp document.createElement() để tạo một đối tượng <canvas> mới và thêm đối tượng này vào trang HTML hiện có:

Mô hình

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Thử ngay

Đường dẫn

Phương pháp phổ biến để vẽ trên canvas là:

1. Bắt đầu đường dẫn - beginPath()
2. Di chuyển đến một điểm - moveTo()
3. Vẽ trong đường dẫn - lineTo()
4. Vẽ đường dẫn - stroke()

Mô hình

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Thử ngay