【canvasタグ】ブラウザにビットマップキャンバスを描いてみよう！「HTML・解説」- ノブレコ
nobreco
★<canvas>タグの特徴
・タグのカテゴリ ―― インライン要素。
・コンテンツモデル ―― フローコンテンツ、フレージングコンテンツ、エンベディットコンテンツ、パルパブルコンテンツ。
・タグの省略 ―― 不可。（開始タグと終了タグが必要）
・使用可能な親要素 ―― フレージングコンテンツを許容するすべての親要素。
・グローバル属性を持つ。
・ARIAロール ―― 標準でのARIAロールは無し。
<canvas>の説明
<canvas>とは
javascriptで任意のビットマップを描画できるキャンバスを表します。
HTML5とjavascriptを併用して、ブラウザ上に図を描画するためのタグです。このタグはHTML5でのみ使用することができます。
この要素は、HTML5から定義された要素ですが、HTML LSからコンテンツモデルが変更されて、トランスペアレントに一部のインタラクティブコンテンツが含められない仕様となっています。
現在は、WHATWG/W3Cにより、正式なHTMLの標準仕様として取り入れられ多様なブラウザで利用ができるようになりました。
■使用目的
<canvas>タグは、ブラウザ上に図形を描画するために使用します。
この要素を使用すれば、画像やプラグインを使用せずに、javascriptとHTMLだけで図形やアニメーションの作成に用いります。つまりスクリプトによって動的にグラフィックを描写可能なビットマップキャンバスを構築することが可能になるのです。
今までは、HTML上で図形やアニメーションを表現するためには、GIFやJPEGの画像を扱う拡張子や、アニメーションではFlashやjavaアプレットが使用されてきましたが、この<canvas>要素を使えば、そのような拡張子やプラグインを使わずにjavascriptベースで図形やアニメーションを表現することができます。
例えば<canvas>要素の使用目的として、グラフを作成する、ゲームのレンダリングなどに使用するといったことがあります。
しかしこの要素は、javascriptでの描写が主体となるため、javascriptに対応していない、または無効といった環境下での使用することはできないので注意してください。
■使える要素
・height
・width
width属性とheight属性で<canvas>要素のピクセルサイズを変更することができます。
またサイズ指定しない場合の初期値は、width="300" height="150" です。
使用上の注意点
① <canvas>要素単体ではアニメーションできない。
この要素単体ではアニメーションさせることはできないので、javascriptでペラペラ漫画のように描画に描画を重ねて動きを付けることになります。
② 描画が動作しなくなる状況。
指定の寸法や面積をオーバーしてしまうと、ビットマップキャンバスを使用できませんので注意が必要です。
③ javascriptが無効のような古典的なブラウザに対しての対応。
<canvas>要素内には代替コンテンツを入れとくことができます。
このようなブラウザの環境状態に対応するために、適切な代替テキストやDOMヘルプを代替コンテンツとして提供しておくことを推奨します。
内容モデル
<canvas>要素の内容モデルは「transparent」です。
ただし、仕様上インタラクティブコンテンツを子孫要素にすることはできません。
例えばインタラクティブコンテンツには<a>要素、<button>要素、<tabindex>属性が指定された要素などがありますが、これらを<canvas>要素で内包することはできません。
<canvas>要素は<canvas>要素が利用できない場合（javascriptが無効等）のフォールバックコンテンツを自ら提供することができます。
仮に<canvas>要素が画像として使用されている場合は、その画像が表示されない場合の<img>要素を入れておくなどの対処をしておくことができます。
また、より複雑な機能を<canvas>要素で提供している場合は、可能な限りその機能についての代替ができる内容を入れておくべきです。
アクセシビリティでの注意点
<canvas>要素に、標準でのARIAロールはありません。
<canvas>要素は様々な視覚表現ができますが、<canvas>要素自体はセマンティクス上の意味を持たないことに注意してください。
また、<canvas>要素以外で表現できる要素があある場合、<canvas>要素の利用をすることは避けましょう。
特に、見出しや、ナビゲーションを<canvas>要素に置き換えると、支援技術でナビゲーションできなくなるなどの、アクセシビリティ上の問題が発生することがあります。
<canvas>の記述例
■基本的な使用例
★HTML
<canvas>要素のHTMLとしての基本的な使い方は上記の通りです。
このままでは、図形などを表示することはできないので、設置した<canvas>要素にjavascriptで喜寿っつした処理内容の関連付けをします。
まとめ
この記事では、<canvas>タグについての解説をいたしました。
このタグはHTMLとjavascriptを合わせて、ブラウザに任意の図形や動的コンテンツを描画するタグです。
<canvas>タグの使い方は非常にシンプルですが、ビットマップキャンバスを描画するにはjavascriptでの処理方法を知っておく必要があります。
この記事では初心者向けの内容となっておりjavascriptの解説は省いていますが、javascriptを学ぶ良い機会になれば幸いです。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん(❁´◡`❁)
