Canvas

<canvas> はスクリプティング(※通常、JavaScript による)によって図形などを描画する為の新しい HTML 要素です。例えば、グラフを描く、写真を合成する、簡単なアニメーションからあまり簡単ではないアニメーションの作成に用いる事が出来ます。

<canvas> は Apple によって Mac OS X の Dashboard のために初めて導入され、後に Safari に実装されました。Firefox 1.5 のような Gecko 1.8 ベースのブラウザもこの新しい要素をサポートしてます。Opera 9 も同様に <canvas> をサポートしています。Internet Explorer で <canvas> を動作させるような取組もあります (例 )。

<canvas> 要素は、web ページ上の 3D グラフィックスのハードウェア・アクセラレーションを行う WebGL によっても使用されます。

ドキュメンテーション

仕様
<canvas> 要素は、HTML5 とも呼ばれる事のある WhatWG Web applications 1.0 仕様の一部です。
Canvas チュートリアル
<canvas> の基本的な使いかたと高度な機能の両方をカバーする網羅的なチュートリアル。
コードスニペット:Canvas
拡張機能開発者向けの <canvas> に関係するコード断片。
Canvas 実例
いくつかの <canvas> のデモ。
canvas に DOM オブジェクトを描画する
HTML 要素などの DOM コンテンツをキャンバスに描画する方法
簡単な RayCaster
キャンバスを用いたレイ・トレーシング・アニメーションのデモ。
Canvas DOM インターフェース
Gecko の Canvas DOM インターフェース

すべて見る...

コミュニティ

Mozilla フォーラムを見る...

その他の情報

ライブラリ

  • libCanvas: 強力かつ軽量な canvas のフレームワーク
  • Processing.js: is a port of the Processing visualization language
  • EaselJS: Flash のような API を持つライブラリ
  • PlotKit: 図表やグラフの作成の為のライブラリ
  • Rekapi: キャンバス用のアニメーション・キーフレーム API
  • PhiloGL: データの可視化、創造的なコーディング、及びゲーム開発の為の WebGL フレームワーク
  • JavaScript InfoVis Toolkit: インタラクティブな 2D キャンバス・データ・ビジュアライゼーション作成の為のツールキット

Document Tags and Contributors

Contributors to this page: Taken, ethertank, Yukoba, dextra, happysadman, Mgjbot, Cai
最終更新者: ethertank,