QA@IT

Canvasで複数のコンテクストを使えますか?

7040 PV

HTML5関連の画像規格、Canvas を使うときには、

    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d');

のように描画コンテクストを取得しますが、同一ウィンドウ内では1つだけしかコンテクストを取得できないものでしょうか? それとも複数のコンテクストを使って、複数の図形を描画するようなことができるのでしょうか?

回答

Herokuのステータス画面とか、その例ですね。一つのcanvasに一本のベジェ曲線しかありませんが、他のHTML要素と合わせて複数重ね合わせています。
https://status.heroku.com/

編集 履歴 (0)

Canvas要素を複数使えばできます。ただし、単一のCanvasエレメントに対して getContext() は同一オブジェクトを返すので、複数のコンテクストを使って1枚の絵を描くような場合は、CSSを使ってCanvas要素をレイヤとして重ねるなどの処理が必要かもしれません。

      var canvas = document.getElementById("target");
      var ctx = canvas.getContext('2d');
      var ctx2 = canvas.getContext('2d');
      console.log(ctx === ctx2); // true

参考
http://html5.litten.com/using-multiple-html5-canvases-as-layers/

編集 履歴 (0)

普通に複数のキャンバスのコンテクストを取得して操作することが可能です。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。