willReadFrequently
getContext('2d', { willReadFrequently: true }) は getImageData() を頻繁に呼び出す場合にパフォーマンスを最適化します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.HTMLCanvasElement.getContext.2d_context.options_willReadFrequently_parameter | 99 | 99 | 28 | 18 | 99 | 18 |
基本構文
JAVASCRIPT
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
ctx.fillRect(0, 0, 100, 100);
const data = ctx.getImageData(0, 0, 100, 100);ライブデモ
Readback-heavy workload
Show the kind of repeated pixel inspection that motivates willReadFrequently.
プレビュー全画面表示
When to set the hint
Explain that willReadFrequently is a context creation hint for read-heavy canvas tasks.
プレビュー全画面表示
Trade-off summary
Remind that a readback hint can change performance characteristics for writes.
プレビュー全画面表示
実務での使いどころ
-
willReadFrequently の活用
Canvas 2Dコンテキストの読み取り最適化オプション。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。