HTML Canvas Cheat Sheet

Canvas

Tạo canvas trong HTML

Tag canvas tạo ra vùng vẽ và hỗ trợ các phương thức vẽ, với 3 thuộc tính cơ bản:

• id: định danh canvas.
• width: độ rộng canvas.
• height: độ cao canvas.

<canvas id="id-canvas" width="640" height="360" />

Tương tác với canvas bằng JavaScript

const canvas = document.getElementById("id-canvas");
const context2d = canvas.getContext("2d");
const contextWebGL = canvas.getContext("webgl");

Thao tác lấy đối tượng canvas, sau đó lấy đối tượng lưu trữ các phương thức hỗ trợ vẽ (context).

• context2d: chứa tất cả các phương thức hỗ trợ vẽ 2D.
• contextWebGL: chứa tất cả phương thức hỗ trợ đồ họa 3D.
• canvas.getContext("2d"): Hỗ trợ trích xuất context 2D.
• canvas.getContext("webgl"): Hỗ trợ trích xuất context WebGL.

Các phương thức vẽ 2D

Vẽ hình chữ nhật - Rectangle

Các phương thức hỗ trợ vẽ hình chữ nhật.

rect(x, y, width, height);
fillRect(x, y, width, height);
strokeRect(x, y, width, height);
clearRect(x, y, width, height);

• x, y: tọa độ gốc trên, bên trái cần vẽ.
• width, height: độ rộng, độ cao của hình chữ nhật.

Vẽ văn bản, chuỗi - Text

Các phương thức hỗ trợ vẽ chuỗi.

fillText(text, x, y, maxWidth);
strokeText(text, x, y, maxWidth);

• text: nội dung cần vẽ.
• x, y: tọa độ gốc trên, bên trái cần vẽ.
• maxWidth (tùy chọn): độ rộng tối đa khung vẽ.

Vẽ ảnh - Images

Các phương thức hỗ trợ vẽ ảnh.

drawImage(image, x, y);
drawImage(image, x, y, width, height);
drawImage(image, sx, sy, sWidth, sHeight, x, y, width, height);

• image: ảnh lưu trữ nội dung cần vẽ, ảnh có thể được tạo từ.
  • CanvasImageSource
  • CSSImageValue
  • HTMLImageElement
  • SVGImageElement
  • HTMLVideoElement
  • HTMLCanvasElement
  • ImageBitmap
  • OffscreenCanvas
• sx, sy: tọa độ phần ảnh cần vẽ trong image.
• sWidth, sHeight: độ rộng, độ cao của phần ảnh cần vẽ trong image.
• x, y: tọa độ cần vẽ trên canvas.
• width, height: độ rộng, cao vùng vẽ trên canvas.

Path

Các thao tác vẽ đường Path.

beginPath();

// Các phương thức tạo Path

stroke(); hoặc fill();

Các phương thức tạo Path.

moveTo(x, y);
lineTo(x, y);
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
quadraticCurveTo(cpx, cpy, x, y);
arc(x, y, radius, startAngle, endAngle [, counterclockwise]);
arcTo(x1, y1, x2, y2, radius);
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise]);
rect(x, y, width, height);

• moveTo: bắt đầu 1 điểm x, y.
• lineTo: vẽ 1 đường thẳng đến tọa độ x, y.
• bezierCurveTo: vẽ 1 đường cong từ điểm bắt đầu đến điểm kết thúc x, y, đường cong được kiểm soát bởi cp1x, cp1y và cp2x, cp2y.
• quadraticCurveTo: vẽ 1 đường cong bậc 2 từ điểm bắt đầu đến điểm kết thúc x, y, đường cong được kiểm soát bởi cpx, cpy.
• arc: tạo đường tròn.
• arcTo: tạo đường tròn khi có tiếp tuyến cho trước.
• ellipse: tạo đường ellipse.
• rect: tạo ra hình chữ nhật.

Style

fillStyle
strokeStyle

Tạo màu sắc cho hình học trong trường hợp lắp đầy hoặc vẽ đường.