キャンバス

canvas 要素を使うと、解像度に依存したビットマップ キャンバスにグラフィックスを描画できます。キャンバス上に描画するために、"コンテキスト" が使われます。たとえば、HTML Canvas 2D Context 仕様で指定された Canvas 2D コンテキストです。Windows Internet Explorer 9 では、2D Canvas 描画 API をコンテキストとして使って canvas 要素がサポートされました。(Internet Explorer 9 の場合、Canvas 2D コンテキストは CanvasRenderingContext2D オブジェクトまたは ICanvasRenderingContext2D インターフェイスによって表現されます)。Internet Explorer 9 のすべてのグラフィックスと同様に、キャンバスも Windows と GPU を使って、ハードウェア アクセラレーションがなされています。

キャンバスを使うと、長方形、パス、線、塗りつぶし、円弧、ベジエ曲線、二次曲線などを組み合わせて描画できます。さらに、Internet Explorer 9 の canvas 要素は、width 属性と height 属性をサポートしています。(width と height の既定値はそれぞれ 300 ピクセルと 150 ピクセルで、既定のカラーは透明な黒です)。

キャンバスは Web 上でグラフィックスをプログラミングする方法の 1 つです。canvas タグは "即時モード" (描画コマンドが直接グラフィックス ハードウェアに送信される) の 2 次元描画サーフェスであり、別のプラグインをダウンロードしなくてもリアルタイムでグラフやアニメーションを描画し、対話的なゲームを実行できます。CanvasRenderingContext2D オブジェクトで定義された API によって、キャンバスでは次のような項目を描画できます。

JavaScript を使って、キャンバスの絵をアニメーションにしたり、キーボード入力やマウス クリック、ブラウザー イベントに反応する対話的操作をすることができます。たとえば、Internet Explorer Test Drive サイトにあるこの例では、ほんの数行の JavaScript で、輝く線の配置と色をランダムに決めています。

Internet Explorer 9 およびそれ以降のバージョンでは、以下の Canvas 2D Context API (CanvasRenderingContext2D オブジェクトによって expose されたメンバー) をサポートしています。

Internet Explorer 11 以降では、次の Canvas 2D Context, Level 2 の API もサポートされています。

  • msImageSmoothingEnabled プロパティ。小さい画像を拡大するときに従来のバイニリア スケーリングとニアレストネイバー スケーリングのどちらを使うかを選びます。
  • キャンバスの fillclipisPointInPath の各メソッドにおける even-odd 塗りつぶしルール値のサポート。W3C 標準の塗りつぶしルール属性に加えて、Internet Explorer 11 ではグローバル塗りつぶしルール プロパティとして msFillRule が用意されています。これにより、塗りつぶしルールを個々に設定する代わりに、すべてのメソッドに適用される塗りつぶしルールを設定できます。
  • setLineDashgetLineDashlineDashOffset の各メソッド。カスタムのストローク破線パターンを作ります。

API リファレンス

Canvas

サンプルとチュートリアル

Canvas を使って 3D グラフィックスを作成する方法
2D 座標系の点をマップする方法
Canvas 特殊効果の作成方法
Canvas を使って画像の色をサンプリングする
Canvas を使ってスペース ゲームを作成する方法
SVG と Canvas でどちらを選ぶか
SVG と Canvas の使用例

Internet Explorer Test Drive デモ

Canvas Pad に関するページ
Canvas Pinball に関するページ
Canvas Zoom に関するページ
Galactic HTML5 パフォーマンス テストに関するページ
HTML5 Blizzard に関するページ
Mr. Potato Gun に関するページ
粒子加速に関するページ

IEBlog 記事

Galactic (HTML5 を使った 3D 太陽系の構築) に関する記事
ネイティブ HTML5 (ダウンロード可能な IE10 Platform Preview 1) に関する記事
HTML5 Blizzard (フル ハードウェア アクセラレータの動作) に関する記事
キャンバスの一般的問題のデバッグに関する記事
IE9 がハードウェア アクセラレーションされたキャンバスを導入したことに関する記事
キャンバスと SVG を使う場面の考察に関する記事

仕様

HTML Canvas 2D Context

関連トピック

HTML 5 Canvas 要素の概要
Disney TRON の舞台裏 (HTML5 で電子ブック サイトを構築する方法) に関するページ
HTML5 Canvas 開発者ガイドに関するページ
HTML5 Canvas でイメージの視覚的なライブラリを作る方法に関するページ
HTML5 SVG とキャンバスで BrikBloc ゲームを作る方法に関するページ
Impact HTML5 ゲーム エンジンでアステロイドを作る方法に関するページ
HTML5 Canvas ゲームの現代化 (パート 1、ハードウェアのスケーリングと CSS3) に関するページ
HTML5 Canvas ゲームの現代化 (パート 2、オフライン、ドラッグ アンド ドロップ、ファイル API) に関するページ
HTML5 ゲーム (EaselJS を使ってキャンバスでスプライトをアニメーション化する方法) に関するページ
ハードウェア アクセラレーションされた HTML 5 Canvas の活用に関するページ

 

 

表示:
© 2015 Microsoft