キャンバスは あらゆる種類のグラフィックを画面上に描画し、WebGL の世界への入り口となっています。 図形や画像の描画、アニメーションの実行、さらには動画コンテンツの表示と処理に使用できます。 メディアが多用されたウェブ アプリケーションで美しいユーザー エクスペリエンスを実現したり、 説明します。
スクリプト化可能です。つまり、キャンバスに描画されるコンテンツをプログラムで作成できます。 使用できます。これによりキャンバスの柔軟性が高まり、
同時に、最新のウェブサイトでは、スクリプトの実行は最も頻繁に行われる ユーザーの反応の問題の原因を特定します。 キャンバスのロジックとレンダリングはユーザー操作と同じスレッドで行われるため、 アニメーションに関わる計算処理は(場合によっては負荷の高い)処理で、アプリの実際の処理に 把握するのに役立ちます
幸いなことに OffscreenCanvas は 脅威への対処です。
以前は、キャンバスの描画機能は <canvas>
要素に関連付けられていました。
つまり DOM に直接依存していましたOffscreenCanvas は
DOM と Canvas API を画面外に移動して分離しています。
この分離により、OffscreenCanvas のレンダリングは DOM から完全に切り離され、 同期が行われないため、通常のキャンバスより速度が向上します。 比較します。
さらに、ウェブワーカーで使用できる点が異なります。 DOM は利用可能です。これにより、あらゆる種類の興味深いユースケースが可能になります。
ワーカーで OffscreenCanvas を使用する
ワーカー スレッドのウェブ バージョンであり、タスクをバックグラウンドで実行できます。
スクリプトの一部をワーカーに移動すると、アプリがユーザー クリティカルな処理を実行する際の空き容量が増えます。 実行することもできます。OffscreenCanvas がなければ、ワーカーで Canvas API を使用する方法はありませんでした。 DOM がありませんでした
OffscreenCanvas は DOM に依存しないため、使用できます。次の例では OffscreenCanvas を使用しています ワーカーのグラデーション色を計算するには:
// file: worker.js
function getGradientColor(percent) {
const canvas = new OffscreenCanvas(100, 1);
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, ctx.canvas.width, 1);
const imgd = ctx.getImageData(0, 0, ctx.canvas.width, 1);
const colors = imgd.data.slice(percent * 4, percent * 4 + 4);
return `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, ${colors[3]})`;
}
getGradientColor(40); // rgba(152, 0, 104, 255 )
メインスレッドのブロックを解除
負荷の高い計算をワーカーに移動すると メインスレッドに集中できます。transferControlToOffscreen を使用する メソッドを使って通常のキャンバスを OffscreenCanvas インスタンスにミラーリングします。適用先のオペレーション OffscreenCanvas は自動的にソース キャンバスにレンダリングされます。
const offscreen = document.querySelector('canvas').transferControlToOffscreen();
const worker = new Worker('myworkerurl.js');
worker.postMessage({canvas: offscreen}, [offscreen]);
次の例では、カラーテーマが変更されたときに負荷の高い計算が行われています。 高速のデスクトップでも数ミリ秒かかりますアニメーションをメインスレッドで実行することもできます。 ワーカーで実行されますメインスレッドの場合、負荷の大きい処理が行われている間はボタンを スレッドはブロックされます。ワーカーの場合 UI の応答性
<ph type="x-smartling-placeholder">その逆も同様です。ビジー状態のメインスレッドは、実行中のアニメーションに影響しません。 指定します。この機能を使用すると、視覚的なジャンクを防ぎ、スムーズなアニメーションを保証できます。 すべてのインスタンスを保護します。
<ph type="x-smartling-placeholder">通常のキャンバスの場合、メインスレッドが人為的にオーバーワークすると、アニメーションが停止します。 ワーカーベースの OffscreenCanvas は滑らかに再生されます。
一般的なライブラリで使用
OffscreenCanvas API は一般に通常の Canvas 要素と互換性があるため、 市場をリードするグラフィック ライブラリとともに、プログレッシブな機能強化として使用できます。
たとえば、Feature-Detect を使用できます。利用可能であれば、Google 検索の canvas オプションを使用します。
const canvasEl = document.querySelector('canvas');
const canvas =
'OffscreenCanvas' in window
? canvasEl.transferControlToOffscreen()
: canvasEl;
canvas.style = {width: 0, height: 0};
const renderer = new THREE.WebGLRenderer({canvas: canvas});
ここでの問題は、Three.js では、canvas には style.width
プロパティと style.height
プロパティがあると想定している点です。
OffscreenCanvas は DOM から完全にデタッチされているため、自分で用意する必要があります。
スタブするか、これらの値を元の値に結び付ける
指定します。
以下は、ワーカーで基本的な Three.js アニメーションを実行する方法を示しています。
<ph type="x-smartling-placeholder">一部の DOM 関連 API は、ワーカーではすぐに利用できないため、 より高度な Three.js 機能(テクスチャなど)を使用する場合は、追加の回避策が必要になることがあります。 これらを試す方法のヒントについては、 Google I/O 2017 の動画
キャンバスのグラフィック機能を多用している場合、OffscreenCanvas は 影響するためですワーカーがキャンバス レンダリング コンテキストを利用できるようにすることで、 並列処理を行い、マルチコア システムをより有効に活用します。