canvasタグとは?|スクリプトを使って図形を描く

canvasタグとは?|スクリプトを使って図形を描く
リンゴ
博士、画像などを埋め込まずに、直接Webページに絵を描いたりすることってできるんですか?
博士
<canvas>タグを使えば可能じゃぞ。
今回は、<canvas>タグを使って動的な図形を描く方法を解説しようかの。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<canvas>タグとは

 

<canvas>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベディッド・コンテンツ / パルパブル・コンテンツ
利用場所 エンベディッド・コンテンツが期待される場所
内容 トランスペアレント


 
 
<canvas>タグは、スクリプトを使って図形を描く際に使用するタグです。
これまでWebページ上で図形を描くには、PNG・JPEG・GIFなどの画像に置き換えるか、Flashなどのプラグインが必要でしたが、<canvas>タグを使用すれば、スクリプトだけでグラフやゲームの画像、簡単なアニメーションなどを表示できるようになります。

canvas要素の中には、canvas要素に対応していない環境で表示させる代替コンテンツを入れるようにしましょう。

なお、<canvas>タグは、動的に図を変化させる必要がある場合に使います。
変化させる必要がない場合は<img>タグや<object>タグ、ページの装飾であればCSSでスタイリングしましょう。
 
 

博士
他に適切な手段が無いか検討したうえで、使用するようにしよう。
 
 

width属性 / height属性

描画する内容の横幅と高さをピクセルで指定します。
width属性とheight属性が指定されていない場合は、300×150pxとして処理されます。
 
 

スポンサーリンク

使用例

 
 

表示例



スクリプトを使って図形を描く




リンゴ
<canvas>タグを使えば、こんなアニメーションも作れるんですね!
 
 

まとめ

スクリプトを使って図形を描く際は、<canvas>タグを使用します。
 
 

博士
このページを参考に、動的な図形を描いてみよう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








canvasタグとは?|スクリプトを使って図形を描く