DedicatedWorkerGlobalScope: cancelAnimationFrame() 方法
注意：此功能僅在 專用 Web Worker 中可用。
DedicatedWorkerGlobalScope 介面的 cancelAnimationFrame() 方法會取消透過呼叫 requestAnimationFrame() 方法先前計劃的動畫幀請求。
呼叫 cancelAnimationFrame() 方法需要當前 worker 擁有一個關聯的 Window 物件。這意味著當前 worker 必須由 Window 物件建立，或者由一個也擁有關聯 Window 物件的專用 worker 建立。
語法
cancelAnimationFrame(handle)
引數
handle-
透過呼叫
requestAnimationFrame()返回的 ID 值；該呼叫必須在同一個 worker 中進行。
返回值
無（undefined）。
異常
NotSupportedErrorDOMException-
如果當前 worker 不支援該方法，則會丟擲此錯誤。
示例
這是一個完整的示例，展示瞭如何在專用 worker 中使用帶有 OffscreenCanvas 的 requestAnimationFrame()。
HTML 程式碼應包含
<canvas width="100" height="100"></canvas>
它應該連結到以下 JavaScript
const worker = new Worker("worker.js");
// Transfer canvas control to the worker
const offscreenCanvas = document
.querySelector("canvas")
.transferControlToOffscreen();
// Start the animation
worker.postMessage(
{
type: "start",
canvas: offscreenCanvas,
},
[offscreenCanvas],
);
// Stop the animation after 5 seconds
setTimeout(() => {
worker.postMessage({
type: "stop",
});
}, 5000);
worker.js
let ctx;
let pos = 0;
let animationId;
let isRunning = false;
let lastTime = 0;
function draw(currentTime) {
if (!isRunning) return;
// Calculate delta time for smooth animation
if (lastTime === 0) lastTime = currentTime;
const deltaTime = (currentTime - lastTime) / 1000;
lastTime = currentTime;
// Clear and draw the moving rectangle
ctx.clearRect(0, 0, 100, 100);
ctx.fillRect(pos, 0, 10, 10);
pos += 50 * deltaTime; // Move 50 pixels per second
// Loop the animation
if (pos > 100) pos = -10;
animationId = self.requestAnimationFrame(draw);
}
self.addEventListener("message", (e) => {
if (e.data.type === "start") {
const transferredCanvas = e.data.canvas;
ctx = transferredCanvas.getContext("2d");
isRunning = true;
lastTime = 0;
animationId = self.requestAnimationFrame(draw);
}
if (e.data.type === "stop") {
isRunning = false;
if (animationId) {
self.cancelAnimationFrame(animationId);
}
}
});
在主執行緒中，我們首先使用 HTMLCanvasElement.transferControlToOffscreen() 將一個 <canvas> 元素的控制權轉移給一個 OffscreenCanvas，然後傳送一個 "start" 訊息到 worker，以啟動其工作，並將 OffscreenCanvas 傳遞給它。
在 worker 檔案 (worker.js) 中，我們處理動畫邏輯。當收到 "start" 訊息時，worker 開始動畫，使矩形從左到右移動。收到 "stop" 訊息後，它會停止動畫。
最後，主執行緒可以在延遲後向 worker 傳送 "stop" 訊息來停止動畫，這樣在停止之前可以看到動畫。
規範
| 規範 |
|---|
| HTML # animationframeprovider-cancelanimationframe |
瀏覽器相容性
載入中…