1. 8.10 画像
    2. 8.11 アニメーションフレーム

8.10 画像

ImageBitmapオブジェクトは過度の待ち時間なしのキャンバスに塗装できるビットマップ画像を表す。

この過度の待ち時間は何かの正確な判断は実装者に委ねるが、一般にビットマップを活用することは、ネットワークI/O、あるいはローカルディスクI/Oを必要とする場合、その後待ち時間はおそらく過度である。一方それが唯一のGPUやシステムRAMからのブロッキングの読み出しを必要とする場合、待ち時間はおそらく許容できる。

promise = self . createImageBitmap(image [, options ])

WindowOrWorkerGlobalScope/createImageBitmap

Firefox52+SafariNoChrome50+
OperaYesEdge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox AndroidYesSafari iOS?Chrome Android50+WebView Android50+Samsung Internet5.0+Opera AndroidYes
caniuse.com table
promise = self . createImageBitmap(image, sx, sy, sw, sh [, options ])

img要素、SVG image要素、video要素、canvas要素、Blobオブジェクト、ImageDataオブジェクト、または別のImageBitmapオブジェクトである画像を取得し、新しいImageBitmapが作成されたときに解決されるpromiseを返す。

ImageBitmapオブジェクトを構築することが全くできない場合、たとえば、与えられたimage データが実際の画像ではないので、代わりにpromiseが却下される。

sxsysw、およびsh引数が指定される場合、ソース画像は与えられたピクセルに切り取られ、元のピクセルに欠けているピクセルは透明な黒に置き換えられる。これらの座標は、CSSピクセルではなく、ソース画像のピクセル座標空間にある。

optionsが指定される場合、ImageBitmapオブジェクトのビットマップデータはoptionsに従って変更される。たとえば、premultiplyAlphaオプションが"premultiply"に設定される場合、ビットマップデータのカラーチャネルはそのアルファチャネルによって事前に乗算される。

ソース画像が有効な状態にない場合、"InvalidStateError" DOMExceptionを拒否する(たとえば、正常に読み込まれなかったimg要素、[[Detached]]内部スロット値がtrueのImageBitmapオブジェクト、data属性値の[[ViewedArrayBuffer]]内部スロットが切り離されているImageDataオブジェクト、データがビットマップイメージとして解釈できないBlobなど)。

スクリプトがソース画像の画像データへのアクセスを許可されていない場合、"SecurityError" DOMExceptionでpromiseを拒否する(たとえば、生成元をまたぐCORSであるvideo、別の生成元からのワーカーのスクリプトで描画されたcanvasなど)。

imageBitmap . close()

ImageBitmap/close

Firefox46+SafariNoChrome52+
Opera37+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android46+Safari iOSNoChrome Android52+WebView Android52+Samsung Internet6.0+Opera Android37+

imageBitmapの基礎となるビットマップデータを解放する。

imageBitmap . width

ImageBitmap/width

Firefox42+SafariNoChrome50+
Opera37+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android42+Safari iOSNoChrome Android50+WebView Android50+Samsung Internet5.0+Opera Android37+

画像の内在幅CSSピクセルで返す。

imageBitmap . height

ImageBitmap/height

Firefox42+SafariNoChrome50+
Opera37+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android42+Safari iOSNoChrome Android50+WebView Android50+Samsung Internet5.0+Opera Android37+

画像の内在高さCSSピクセルで返す。

このAPIを使用すると、スプライトシートは、プレカットと調製することができる:

var sprites = {};
function loadMySprites() {
  var image = new Image();
  image.src = 'mysprites.png';
  var resolver;
  var promise = new Promise(function (arg) { resolver = arg });
  image.onload = function () {
    resolver(Promise.all([
      createImageBitmap(image,  0,  0, 40, 40).then(function (image) { sprites.person = image }),
      createImageBitmap(image, 40,  0, 40, 40).then(function (image) { sprites.grass  = image }),
      createImageBitmap(image, 80,  0, 40, 40).then(function (image) { sprites.tree   = image }),
      createImageBitmap(image,  0, 40, 40, 40).then(function (image) { sprites.hut    = image }),
      createImageBitmap(image, 40, 40, 40, 40).then(function (image) { sprites.apple  = image }),
      createImageBitmap(image, 80, 40, 40, 40).then(function (image) { sprites.snake  = image })
    ]));
  };
  return promise;
}

function runDemo() {
  var canvas = document.querySelector('canvas#demo');
  var context = canvas.getContext('2d');
  context.drawImage(sprites.tree, 30, 10);
  context.drawImage(sprites.snake, 70, 10);
}

loadMySprites().then(runDemo);

8.11 アニメーションフレーム

Window/requestAnimationFrame

Support in all current engines.

Firefox23+Safari6.1+Chrome24+
Opera15+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android23+Safari iOS7+Chrome Android25+WebView Android37+Samsung Internet1.5+Opera Android14+
caniuse.com table

一部のオブジェクトにはAnimationFrameProviderインターフェイスミックスインが含まれる。

AnimationFrameProviderオブジェクトはまた、プロバイダーの内部状態を格納するターゲットオブジェクトを持つ。これは次のように定義される:

AnimationFrameProviderWindowである場合
Window関連付けられたDocument
AnimationFrameProviderDedicatedWorkerGlobalScopeである場合
DedicatedWorkerGlobalScope

ターゲットオブジェクトは、アニメーションフレームコールバックのマップ、これは初期は空でなければならない順序付きマップである、およびアニメーションフレームコールバック識別子、これは初期は0でなければならない数、を持つ。

次のいずれかが当てはまる場合、AnimationFrameProviderプロバイダーサポートされるとみなされる:


The requestAnimationFrame(callback) method must run the following steps:

  1. If this AnimationFrameProvider is not supported, then throw a "NotSupportedError" DOMException.

  2. Let target be this AnimationFrameProvider's target object.

  3. Increment target's animation frame callback identifier by one, and let handle be the result.

  4. Let callbacks be target's map of animation frame callbacks.

  5. Set callbacks[handle] to callback.

  6. Return handle.

Window/cancelAnimationFrame

Support in all current engines.

Firefox23+Safari6.1+Chrome24+
Opera15+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android23+Safari iOS7+Chrome Android25+WebView Android37+Samsung Internet1.5+Opera Android14+

The cancelAnimationFrame(handle) method must run the following steps:

  1. If this AnimationFrameProvider is not supported, then throw a "NotSupportedError" DOMException.

  2. Let callbacks be this AnimationFrameProvider's target object's map of animation frame callbacks.

  3. Remove callbacks[handle].

To run the animation frame callbacks for a target object target with a timestamp now:

  1. Let callbacks be target's map of animation frame callbacks.

  2. Let callbackHandles be the result of getting the keys of callbacks.

  3. For each handle in callbackHandles, if handle exists in callbacks:

    1. Let callback be callbacks[handle].

    2. Remove callbacks[handle].

    3. Invoke callback, passing now as the only argument, and if an exception is thrown, report the exception.

ワーカー内部では、canvas要素から転送されたOffscreenCanvasと一緒にrequestAnimationFrame()を使用することができる。まず、文書内で、ワーカーに制御を転送する:

const offscreenCanvas = document.getElementById("c").transferControlToOffscreen();
worker.postMessage(offscreenCanvas, [offscreenCanvas]);

次に、ワーカーにおいて、以下のコードで左から右に移動する矩形を描画する:

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

self.onmessage = function(ev) {
  const transferredCanvas = ev.data;
  ctx = transferredCanvas.getContext("2d");
  draw();
};