API Canvas

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

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

API Canvas có thể vẽ hình dạng, đường thẳng, đường cong, khung, văn bản và hình ảnh, cũng như màu sắc, quay, độ trong suốt và các thao tác pixel khác.

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 lập tức

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ú

Yếu tố <canvas> HTML tự thân 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 thức getContext() trả về một đối tượng có công cụ vẽ (phương thức).

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 thức fillRect() dưới đây đã vẽ một hình vuông đen, góc trên cùng bên trái của nó ở vị trí 20,20. Hình vuông có độ rộng 150 pixel và độ cao 100 pixel:

Mô hình

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

Thử ngay lập tức

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 lập tức

Bạn cũng có thể sử dụng phương thức document.createElement() để tạo một yếu tố <canvas> mới và thêm yếu tố đó 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 lập tức

Đường dẫn

Cách 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 lập tức