DedicatedWorkerGlobalScope: метод cancelAnimationFrame()

Метод cancelAnimationFrame() интерфейса DedicatedWorkerGlobalScope отменяет запрос кадра анимации, ранее запланированный с помощью вызова requestAnimationFrame().

Для вызова метода cancelAnimationFrame() текущий рабочий процесс должен иметь связанного владельца window. Это означает, что текущий рабочий процесс должен быть создан window или посвящённым рабочим процессом, который также имеет связанного владельца window.

handle

Значение идентификатора, возвращённое вызовом requestAnimationFrame(); вызов должен быть выполнен в том же рабочем процессе.

None (undefined).

NotSupportedError DOMException

Выбрасывается, если метод не поддерживается текущим рабочим процессом.

В основном потоке мы начинаем с передачи управления элементом <canvas> в OffscreenCanvas, используя HTMLCanvasElement.transferControlToOffscreen() и отправляем сообщение в "start" для выполнения работы с offscreen canvas:

const offscreenCanvas = document
  .querySelector("canvas")
  .transferControlToOffscreen();

worker.postMessage(
  {
    type: "start",
    canvas: offscreenCanvas,
  },
  [offscreenCanvas],
);

При получении сообщения "start", рабочий процесс начинает анимацию, перемещая прямоугольник слева направо. При получении сообщения "stop", он остановит анимацию.

let ctx;
let pos = 0;

function draw(dt) {
  ctx.clearRect(0, 0, 100, 100);
  ctx.fillRect(pos, 0, 10, 10);
  pos += 10 * dt;
  self.requestAnimationFrame(draw);
}

self.addEventListener("message", (e) => {
  if (e.data.type === "start") {
    const transferredCanvas = e.data.canvas;
    ctx = transferredCanvas.getContext("2d");
    self.requestAnimationFrame(draw);
  }
  if (e.data.type === "stop") {
    self.cancelAnimationFrame(handle);
  }
});

Наконец, если необходимо, основной поток может отправить сообщение "stop" рабочему процессу, чтобы остановить анимацию:

worker.postMessage({
  type: "stop",
});

• DedicatedWorkerGlobalScope.requestAnimationFrame()
• Window.cancelAnimationFrame()