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 ])

Takes image, which can be an img element, an SVG image element, a video element, a canvas element, a Blob object, an ImageData object, or another ImageBitmap object, and returns a promise that is resolved when a new ImageBitmap is created.

If no ImageBitmap object can be constructed, for example because the provided image data is not actually an image, then the promise is rejected instead.

If sx, sy, sw, and sh arguments are provided, the source image is cropped to the given pixels, with any pixels missing in the original replaced by transparent black. These coordinates are in the source image's pixel coordinate space, not in CSS pixels.

If options is provided, the ImageBitmap object's bitmap data is modified according to options. For example, if the premultiplyAlpha option is set to "premultiply", the bitmap data's color channels are premultiplied by its alpha channel.

Rejects the promise with an "InvalidStateError" DOMException if the source image is not in a valid state (e.g., an img element that hasn't loaded successfully, an ImageBitmap object whose [[Detached]] internal slot value is true, an ImageData object whose data attribute value's [[ViewedArrayBuffer]] internal slot is detached, or a Blob whose data cannot be interpreted as a bitmap image).

Rejects the promise with a "SecurityError" DOMException if the script is not allowed to access the image data of the source image (e.g. a video that is CORS-cross-origin, or a canvas being drawn on by a script in a worker from another origin).

imageBitmap . close()

ImageBitmap/close

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

Releases imageBitmap's underlying bitmap data.

imageBitmap . width

ImageBitmap/width

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

Returns the intrinsic width of the image, in CSS pixels.

imageBitmap . height

ImageBitmap/height

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

Returns the intrinsic height of the image, in CSS pixels.

この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インターフェイスミックスインが含まれる。

Each AnimationFrameProvider object also has a target object that stores the provider's internal state. It is defined as follows:

If the AnimationFrameProvider is a Window
The Window's associated Document
If the AnimationFrameProvider is a DedicatedWorkerGlobalScope
The DedicatedWorkerGlobalScope

Each target object has a map of animation frame callbacks, which is an ordered map that must be initially empty, and an animation frame callback identifier, which is a number that must initially be zero.

An AnimationFrameProvider provider is considered supported if any of the following hold:


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+ChromeYes
Opera15+EdgeYes
Edge (Legacy)12+Internet Explorer10+
Firefox Android23+Safari iOS7+Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera 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.

Inside workers, requestAnimationFrame() can be used together with an OffscreenCanvas transferred from a canvas element. First, in the document, transfer control to the worker:

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

Then, in the worker, the following code will draw a rectangle moving from left to right:

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();
};