Loading article…
HTMLのcanvas要素は、 2D図形やビットマップ画像を動的かつスクリプトでレンダリングすることを可能にします。HTML5で導入されたこの要素は、ビットマップを更新する低レベルのプロシージャルモデルです。また、 2Dゲームの作成にも役立ちます。<canvas>
この要素は独自の2D描画APIを提供するだけでなく、OpenGL ESを使用した3Dレンダリングを可能にするWebGL APIもサポートしています。<canvas>
Canvasは、当初2004年にAppleが自社のMac OS X WebKitコンポーネントで使用するために導入し[ 1 ] 、 DashboardウィジェットやSafariブラウザなどのアプリケーションを支えました。その後、2005年にはGeckoブラウザのバージョン1.8に採用され[ 2 ]、2006年にはOperaにも採用されました[ 3 ]。また、Web Hypertext Application Technology Working Group（WHATWG）によって次世代Webテクノロジーの新しい仕様案で標準化されました[ 4 ] 。
キャンバスは、高さと幅の属性を持つHTMLコードcanvasで定義された描画可能な領域で構成されます。JavaScriptコードは、他の一般的な2D APIと同様の描画関数一式を介してこの領域にアクセスできるため、動的にグラフィックを生成することが可能です。キャンバスの想定される用途としては、グラフの作成、アニメーション、ゲーム、画像合成などが挙げられます。
キャンバスとのやり取りには、キャンバスのレンダリングコンテキストの取得が含まれます。このコンテキストによって、キャンバスAPI、WebGL、またはWebGL2のどのレンダリングコンテキストを使用するかが決まります。
以下のコードは、HTMLページ内に要素を作成します。<canvas>
< canvas id = "example" width = "200" height = "200" > お使いのブラウザがHTMLのcanvas要素をサポートしていない場合、このテキストが表示されます。 </canvas>JavaScriptを使用すると、キャンバス上に描画できます。
var example = document.getElementById ( ' example ' ); var context = example.getContext ( ' 2d ' ) ; context.fillStyle = ' red ' ; context.fillRect ( 30 , 30 , 50 , 50 ) ;このコードは画面上に赤い四角形を描画します。
Canvas API は、キャンバス コンテキストのすべての属性を保存および復元するためのsave()とも提供します。restore()
キャンバスには実際には2つのサイズがあります。要素自体のサイズと、要素の描画領域のサイズです。要素の幅と高さの属性を設定すると、これらの両方のサイズが設定されます。CSS属性は要素のサイズのみに影響し、描画領域には影響しません。
デフォルトでは、canvas要素のサイズと描画領域のサイズは、どちらも幅300ピクセル、高さ150ピクセルです。例に示されているリストでは、CSSを使用してcanvas要素のサイズを設定していますが、要素のサイズは幅600ピクセル、高さ300ピクセルとなっています。しかし、描画領域のサイズはデフォルト値の300ピクセル×150ピクセルのままです。canvas要素のサイズが描画領域のサイズと一致しない場合、ブラウザは要素に合わせて描画領域を拡大縮小します（これにより、予期しない結果が生じる可能性があります）。
要素サイズと描画面サイズを異なる値に設定する例：
<!DOCTYPE html> < html > < head > < title >キャンバス要素のサイズ: 600 x 300、 キャンバス描画面サイズ: 300 x 150 </ title > < style > body { background : #dddddd ; } # canvas { margin : 20 px ; padding : 20 px ; background : #ffffff ; border : thin inset #aaaaaa ; width : 600 px ; height : 300 px ; } </ style > </ head > < body > < canvas id = "canvas" > キャンバスはサポートされていません </canvas> </body> </html>SVGは、ブラウザで図形を描画するための代替手法です。[ 5 ]ラスタベースのキャンバスとは異なり、SVGはベクターベースであるため、描画された各図形はシーングラフまたはドキュメントオブジェクトモデル内のオブジェクトとして記憶され、その後ビットマップにレンダリングされます。つまり、SVGオブジェクトの属性が変更されると、ブラウザはシーンを自動的に再レンダリングできます。
一方、Canvasオブジェクトは即時描画モードで描画されます。上記のCanvasの例では、矩形の描画操作によってCanvasが変更され、矩形としての表現はシステムによって破棄されます。矩形の位置が変更された場合、矩形によって覆われていた可能性のあるオブジェクトを含め、Canvas全体を再描画する必要があります。同等のSVGの場合、矩形の位置属性を変更するだけで、ブラウザが再描画方法を決定します。Canvasモデルを抽象化して、Canvas要素内でSVGのようなシーン機能を実現するJavaScriptライブラリも存在します。複数のCanvasレイヤーを使用することもできるため、変更が必要な場合でも、特定のレイヤーのみを再作成すれば済みます。
SVG画像はXMLで表現され、XML編集ツールを使えば複雑なシーンを作成・管理できます。
SVGシーングラフでは、オブジェクトにイベントハンドラを関連付けることができるため、長方形がonClickイベントに応答することが可能です。キャンバスで同じ機能を実現するには、マウスのクリック座標と描画された長方形の座標を手動で照合して、クリックされたかどうかを判断する必要があります。
概念的には、canvasはより高レベルのインターフェース（例えば、SVGサポート）を構築するための低レベルAPIです。Android 2.xのブラウザのように、SVGをサポートしていないもののcanvasをサポートしているブラウザ向けに、canvasを使用して部分的なSVG実装を提供するJavaScriptライブラリが存在します。しかし、これは通常のケースではありません。canvasは独立した標準規格です。canvas用のシーングラフライブラリが存在し、SVGにはビットマップ操作機能がいくつかあるため、状況は複雑です。
キャンバス要素が導入された当時、ウェブ標準コミュニティからは賛否両論の反応があった。AppleがSVG標準をサポートする代わりに独自の新しい要素を作成した決定に対しては反対意見があった。名前空間がないなど、構文に関する懸念もある。[ 6 ]
2007 年 3 月 14 日、WebKit 開発者のDave Hyatt はApple の上級特許顧問 Helene Plotka Workman 氏からのメールを転送しました[ 7 ]。そのメールには、Apple は2005 年 3 月 24 日付けの WHATWG の Web Applications 1.0 作業草案、セクション 10.1「グラフィックス: ビットマップ キャンバス」[ 8 ]に関するすべての知的財産権を留保しているが、仕様が正式な特許ポリシーを持つ標準化団体に移管された場合は特許のライセンス供与の可能性を残している、と記載されていました。これはウェブ開発者の間で大きな議論を巻き起こし、ワールド ワイド ウェブ コンソーシアム(W3C) がロイヤリティ フリー ライセンスを明確に推奨しているのに対し、WHATWG には特許に関するポリシーがないことについて疑問が生じました。Apple は後に、W3C のロイヤリティ フリー特許ライセンス条件に基づいて特許を開示しました[ 9 ] 。この開示は、Canvas 要素が HTML ワーキング グループによって作成される将来の W3C 勧告の一部になるたびに、Apple が特許のロイヤリティ フリー ライセンスを提供する必要があることを意味します。[ 10 ]
キャンバスフィンガープリンティングは、ウェブサイトが HTML 要素を使用して訪問者を識別および追跡できるようにする、オンライン ユーザーを追跡するためのブラウザ フィンガープリンティング技術の 1 つです。この技術は、プリンストン大学とKU ルーヴェン大学の研究者が論文「ウェブは決して忘れない」で説明した後、2014 年にメディアで広く取り上げられました。[ 11 ] [ 12 ] [ 13 ] [ 14 ]キャンバスフィンガープリンティングに関するプライバシーの懸念は、ユーザーがオンライン追跡を回避するには、 Cookie を削除してキャッシュをクリアしても十分ではないという事実に集中しています。<canvas>
この要素は、 Mozilla Firefox、Google Chrome、Internet Explorer、Safari、Konqueror、Opera [ 16 ]、およびMicrosoft Edge [ 17 ]の最新バージョンでサポートされています。
{{cite web}}: CS1メンテナンス: アーカイブサービスは非推奨になりました (リンク)canvas、 W3C、2014年10月28日、2015年1月9日取得