OffscreenCanvasRenderingContext2D

Ví dụ

Đoạn code sau tạo đối tượng Worker bằng cách sử dụng hàm khởi tạo Worker(). Phương thức transferControlToOffscreen() được sử dụng để lấy đối tượng OffscreenCanvas từ phần tử <canvas> để có thể chuyển sang worker:

const canvas = document.getElementById("canvas");
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker("worker.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);

Trong luồng worker, chúng ta có thể sử dụng OffscreenCanvasRenderingContext2D để vẽ lên bitmap của đối tượng OffscreenCanvas:

onmessage = (event) => {
  const canvas = event.data.canvas;
  const offCtx = canvas.getContext("2d");
  // draw to the offscreen canvas context
  offCtx.fillStyle = "red";
  offCtx.fillRect(0, 0, 100, 100);
};

Để xem ví dụ đầy đủ, hãy xem ví dụ OffscreenCanvas worker (chạy ví dụ OffscreenCanvas worker).

Phương thức bổ sung

Phương thức sau là mới trong giao diện OffscreenCanvasRenderingContext2D và không tồn tại trong giao diện CanvasRenderingContext2D:

commit() Đã lỗi thời Không chuẩn

Đẩy hình ảnh đã kết xuất lên phần tử <canvas> placeholder của đối tượng OffscreenCanvas.

Tính năng không được hỗ trợ

Phương thức giao diện người dùng sau không được hỗ trợ bởi giao diện OffscreenCanvasRenderingContext2D:

CanvasRenderingContext2D.drawFocusIfNeeded()

Nếu một phần tử đã cho được lấy nét, phương thức này vẽ vòng focus quanh đường dẫn hiện tại.

Thuộc tính và phương thức kế thừa

Các thuộc tính và phương thức sau được kế thừa từ CanvasRenderingContext2D. Chúng có cách sử dụng giống như trong CanvasRenderingContext2D

Ngữ cảnh

CanvasRenderingContext2D.getContextAttributes() Thử nghiệm

Trả về đối tượng chứa các thuộc tính ngữ cảnh thực tế. Thuộc tính ngữ cảnh có thể được yêu cầu bằng OffscreenCanvas.getContext().

CanvasRenderingContext2D.isContextLost()

Trả về true nếu ngữ cảnh kết xuất bị mất.

Vẽ hình chữ nhật

CanvasRenderingContext2D.clearRect()

Đặt tất cả pixel trong hình chữ nhật được xác định bởi điểm bắt đầu (x, y) và kích thước (width, height) thành đen trong suốt, xóa mọi nội dung đã vẽ trước đó.

CanvasRenderingContext2D.fillRect()

Vẽ một hình chữ nhật được tô màu tại vị trí (x, y) với kích thước được xác định bởi width và height.

CanvasRenderingContext2D.strokeRect()

Vẽ một hình chữ nhật có điểm bắt đầu tại (x, y) với chiều rộng w và chiều cao h lên canvas, sử dụng kiểu stroke hiện tại.

Vẽ văn bản

CanvasRenderingContext2D.fillText()

Vẽ (tô màu) văn bản đã cho tại vị trí (x, y) đã cho.

CanvasRenderingContext2D.strokeText()

Vẽ (stroke) văn bản đã cho tại vị trí (x, y) đã cho.

CanvasRenderingContext2D.measureText()

Trả về đối tượng TextMetrics.

Kiểu đường

CanvasRenderingContext2D.lineWidth

Chiều rộng của đường. Mặc định 1.0.

CanvasRenderingContext2D.lineCap

Loại kết thúc ở cuối các đường. Các giá trị có thể: butt (mặc định), round, square.

CanvasRenderingContext2D.lineJoin

Xác định loại góc nơi hai đường gặp nhau. Các giá trị có thể: round, bevel, miter (mặc định).

CanvasRenderingContext2D.miterLimit

Tỷ lệ giới hạn miter. Mặc định 10.

CanvasRenderingContext2D.getLineDash()

Trả về mảng mẫu gạch đứt đoạn hiện tại chứa số chẵn các số không âm.

CanvasRenderingContext2D.setLineDash()

Đặt mẫu gạch đứt đoạn hiện tại.

CanvasRenderingContext2D.lineDashOffset

Chỉ định nơi bắt đầu mảng gạch đứt đoạn trên một đường.

Kiểu fill và stroke

CanvasRenderingContext2D.fillStyle

Màu sắc hoặc kiểu dùng bên trong hình dạng. Mặc định black.

CanvasRenderingContext2D.strokeStyle

Màu sắc hoặc kiểu dùng cho các đường xung quanh hình dạng. Mặc định black.

Gradient và mẫu

CanvasRenderingContext2D.createConicGradient()

Tạo gradient hình nón quanh một điểm được xác định bởi tọa độ trong các tham số.

CanvasRenderingContext2D.createLinearGradient()

Tạo gradient tuyến tính dọc theo đường được xác định bởi tọa độ trong các tham số.

CanvasRenderingContext2D.createRadialGradient()

Tạo gradient hướng tâm từ tọa độ của hai vòng tròn trong các tham số.

CanvasRenderingContext2D.createPattern()

Tạo mẫu sử dụng hình ảnh được chỉ định. Lặp lại nguồn theo các hướng được chỉ định bởi đối số lặp. Phương thức này trả về CanvasPattern.

Đường dẫn

CanvasRenderingContext2D.beginPath()

Bắt đầu đường dẫn mới bằng cách xóa danh sách các đường dẫn con.

CanvasRenderingContext2D.closePath()

Khiến điểm bút quay trở lại đầu đường dẫn con hiện tại.

CanvasRenderingContext2D.moveTo()

Di chuyển điểm bắt đầu của đường dẫn con mới đến tọa độ (x, y).

CanvasRenderingContext2D.lineTo()

Kết nối điểm cuối cùng trong đường dẫn con hiện tại với tọa độ (x, y) được chỉ định bằng một đường thẳng.

CanvasRenderingContext2D.fill()

Tô màu các đường dẫn con hiện tại bằng kiểu fill hiện tại.

CanvasRenderingContext2D.stroke()

Stroke các đường dẫn con hiện tại bằng kiểu stroke hiện tại.

Biến đổi

CanvasRenderingContext2D.getTransform()

Lấy ma trận biến đổi hiện tại đang được áp dụng cho ngữ cảnh.

CanvasRenderingContext2D.rotate()

Thêm phép quay vào ma trận biến đổi.

CanvasRenderingContext2D.scale()

Thêm phép co giãn vào canvas theo x theo chiều ngang và y theo chiều dọc.

CanvasRenderingContext2D.translate()

Thêm phép dịch chuyển bằng cách di chuyển canvas và gốc tọa độ của nó x theo chiều ngang và y theo chiều dọc.

Trạng thái canvas

CanvasRenderingContext2D.save()

Lưu trạng thái kiểu vẽ hiện tại bằng stack.

CanvasRenderingContext2D.restore()

Khôi phục trạng thái kiểu vẽ về phần tử cuối cùng trong stack trạng thái được lưu bởi save().

CanvasRenderingContext2D.canvas

Tham chiếu chỉ đọc đến đối tượng OffscreenCanvas.

CanvasRenderingContext2D.reset()

Đặt lại trạng thái kiểu vẽ hiện tại về các giá trị mặc định.

Bộ lọc

CanvasRenderingContext2D.filter

Áp dụng bộ lọc CSS hoặc SVG lên canvas; ví dụ để thay đổi độ sáng hoặc độ mờ của nó.

Thuộc tính và phương thức không được hỗ trợ

Phương thức sau không được hỗ trợ trong giao diện OffscreenCanvasRenderingContext2D:

CanvasRenderingContext2D.drawFocusIfNeeded()

Nếu một phần tử đã cho được lấy nét, phương thức này vẽ vòng focus quanh đường dẫn hiện tại.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• HTMLCanvasElement
• <canvas>