OffscreenCanvas

Hàm khởi tạo

OffscreenCanvas()

Hàm khởi tạo OffscreenCanvas. Tạo một đối tượng OffscreenCanvas mới.

Thuộc tính thể hiện

OffscreenCanvas.height

Chiều cao của canvas ngoài màn hình.

OffscreenCanvas.width

Chiều rộng của canvas ngoài màn hình.

Phương thức thể hiện

OffscreenCanvas.getContext()

Trả về ngữ cảnh vẽ cho canvas ngoài màn hình, hoặc null nếu mã định danh ngữ cảnh không được hỗ trợ, hoặc canvas ngoài màn hình đã được đặt sang một chế độ ngữ cảnh khác.

OffscreenCanvas.convertToBlob()

Tạo một đối tượng Blob biểu diễn hình ảnh chứa trong canvas.

OffscreenCanvas.transferToImageBitmap()

Tạo một đối tượng ImageBitmap từ hình ảnh được kết xuất gần đây nhất của OffscreenCanvas. Xem tài liệu tham khảo của nó để biết các lưu ý quan trọng khi quản lý ImageBitmap này.

Sự kiện

Kế thừa sự kiện từ phần tử cha, EventTarget.

Lắng nghe các sự kiện này bằng addEventListener() hoặc bằng cách gán một trình lắng nghe sự kiện cho thuộc tính oneventname của giao diện này.

contextlost

Kích hoạt nếu trình duyệt phát hiện ngữ cảnh OffscreenCanvasRenderingContext2D bị mất.

contextrestored

Kích hoạt nếu trình duyệt khôi phục thành công ngữ cảnh OffscreenCanvasRenderingContext2D.

Ví dụ

Hiển thị đồng bộ các khung do OffscreenCanvas tạo ra

Một cách dùng API OffscreenCanvas là sử dụng một ngữ cảnh kết xuất đã lấy từ đối tượng OffscreenCanvas để tạo các khung hình mới. Khi một khung hình mới đã kết xuất xong trong ngữ cảnh này, có thể gọi phương thức transferToImageBitmap() để lưu hình ảnh được kết xuất gần nhất. Phương thức này trả về một đối tượng ImageBitmap, có thể được dùng trong nhiều Web API khác nhau và cả trong canvas thứ hai mà không cần tạo bản sao chuyển giao.

Để hiển thị ImageBitmap, bạn có thể dùng ngữ cảnh ImageBitmapRenderingContext, ngữ cảnh này có thể được tạo bằng cách gọi canvas.getContext("bitmaprenderer") trên một phần tử canvas (hiển thị). Ngữ cảnh này chỉ cung cấp chức năng thay thế nội dung canvas bằng ImageBitmap đã cho. Một lệnh gọi ImageBitmapRenderingContext.transferFromImageBitmap() với ImageBitmap đã được kết xuất và lưu từ OffscreenCanvas trước đó sẽ hiển thị ImageBitmap trên canvas và chuyển quyền sở hữu của nó sang canvas. Một OffscreenCanvas đơn lẻ có thể chuyển các khung hình vào số lượng bất kỳ đối tượng ImageBitmapRenderingContext nào khác.

Với hai phần tử <canvas> sau

<canvas id="one"></canvas> <canvas id="two"></canvas>

đoạn mã sau sẽ thực hiện kết xuất bằng OffscreenCanvas như mô tả ở trên.

const one = document.getElementById("one").getContext("bitmaprenderer");
const two = document.getElementById("two").getContext("bitmaprenderer");

const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

// Thực hiện một số thao tác vẽ cho canvas thứ nhất bằng ngữ cảnh gl
const bitmapOne = offscreen.transferToImageBitmap();
one.transferFromImageBitmap(bitmapOne);

// Thực hiện thêm một số thao tác vẽ cho canvas thứ hai
const bitmapTwo = offscreen.transferToImageBitmap();
two.transferFromImageBitmap(bitmapTwo);

Hiển thị bất đồng bộ các khung do OffscreenCanvas tạo ra

Một cách khác để dùng API OffscreenCanvas là gọi transferControlToOffscreen() trên phần tử <canvas>, dù là trong worker hay trên luồng chính, thao tác này sẽ trả về một đối tượng OffscreenCanvas từ đối tượng HTMLCanvasElement ở luồng chính. Khi gọi getContext(), bạn sẽ lấy được ngữ cảnh kết xuất từ OffscreenCanvas đó.

Tập lệnh main.js (luồng chính) có thể trông như sau:

const htmlCanvas = document.getElementById("canvas");
const offscreen = htmlCanvas.transferControlToOffscreen();

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

Trong khi tập lệnh offscreen-canvas.js (luồng worker) có thể như sau:

onmessage = (evt) => {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");
  // Thực hiện một số thao tác vẽ bằng ngữ cảnh gl
};

Cũng có thể dùng requestAnimationFrame() trong worker:

onmessage = (evt) => {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");

  function render(time) {
    // Thực hiện một số thao tác vẽ bằng ngữ cảnh gl
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
};

Để xem ví dụ đầy đủ, xem mã nguồn ví dụ OffscreenCanvas trên GitHub hoặc chạy ví dụ OffscreenCanvas trực tiếp.

Thông số kỹ thuật

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

Xem thêm

• CanvasRenderingContext2D
• OffscreenCanvasRenderingContext2D
• ImageBitmap
• ImageBitmapRenderingContext
• HTMLCanvasElement.transferControlToOffscreen()
• requestAnimationFrame()
• WebGL Off the Main Thread – Mozilla Hacks (2016)