IO StreamIO Stream

Search…

Archived
Share

HTML Canvas Cheat Sheet

STDIO TrainingSTDIO Training
04/11/2021•2 min read
Bảng tham khảo tổng hợp các hàm và các ghi chú hữu ích khi sử dụng Canvas trong HTML.

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.

IO Stream