canvas要素とは | IT職種コラム

TOP
コラム
canvas要素とは

■canvas要素とは！？

「canvas要素」は図形を描くためのWebブラウザの画面内に動的な描画領域を作る仕組みのHTML要素です。 Webページ上にcanvas要素を配置すると、その部分は描画領域になります。今まではWebページで動的に図や画像やアニメーションを描画するには「Flash」などが使用されていました。しかし、「Flash」の機能の動的なコンテンツが、専用のプラグイン無しに、HTMLの要素と「Javascript」だけで実現できるようになりました。

canvas要素の高さと幅は、width属性とheight属性で指定することが可能ですが、指定しない場合の初期値は幅：300×高さ：150になります。また、背景の色を指定しない場合、通常ブラウザでは黒になります。

＜canvas＞～＜/canvas＞の中には、「canvas要素」がサポートされていない環境で表示するメッセージを記述することが可能です。ですが「canvas要素」がサポートされていない環境以外で使用する場合は「canvas要素」ではなく「ｈ要素」など適切なものを選んで使用するようにしましょう。

「canvas要素」は「JavaScript」を使用し図形を描く為の新しい「HTML要素です。「canvas要素」は本来は「Mac OS X v10.4」の内部でWebKitコンポーネントとして、 DashboardウィジェットやSafariでのアプリケーションを強化するために、 2004年にアップルが最初に導入した技術です。その後、「Opera」、「Mozilla Firefox」でも使用され、「WHATWG」（Web Hypertext Application Technology Working Group）で新しい標準規格として標準化されました。現在では、「Google Chrome」、「Safari」「Windows Internet Explorer」、などの主要なブラウザで実装されいます。 (※Internet Exproloer 8以前のバージョンには対応していません。) また、現状ではブラウザによっては同じコードを記述してもその解釈に相違があります。「canvas要素」を使用する際には、上記の点に注意し使用する必要があるでしょう。

■canvas要素の記述方法

「canvas要素」の記述方法は、「img要素」と似ています。例えば以下のコードのように記述すると、幅500pixel、高さ400pixelの大きさで「canvas要素」が設定されます。

＜canvas id="canvas1" width="500" height="400"＞＜/canvas＞

「canvas要素」の「id属性」は、Javascriptでどの「canvas要素」に対して処理を行うのかを指定する際に必要です。 canvas要素を使用する際には常にid属性に任意の名称を指定するようにしましょう。

■サンプルコード

「canvas要素」と「Javascript」をHTML内で使用するためのサンプルコードです。

1　　＜canvas id="canvas" width="500" height="500" style="border:1px solid #dcdcdc;"＞＜/canvas＞
2　　
3　　＜script＞
4　　//canvas要素の取得
5　　var canvas = document.getElementById('canvas');
6　　//2D設定
7　　var ctx = canvas.getContext('2d');
8　　//四角形
9　　ctx.fillStyle = 'skyblue';
10　　ctx.fillRect(50, 50, 100, 100);
11　　
12　　//パスのリセット
13　　ctx.beginPath();
14　　//円形
15　　ctx.fillStyle = 'pink';
16　　ctx.arc(200, 200, 50, 0, Math.PI * 2.0, true);
17　　ctx.fill();
18　　＜/script＞

■補足

キャンバスの寸法幅

・ブラウザ：Chrome,最大高：32,767 pixels,最大幅：32,767 pixels,最大面積：268,435,456 pixels (※16,384 x 16,384)

・ブラウザ：Firefox,最大高：32,767 pixels,最大幅：32,767 pixels,最大面積：472,907,776 pixels (※22,528 x 20,992)

・ブラウザ：Safari,最大高：32,767 pixels,最大幅：32,767 pixels,最大面積：268,435,456 pixels (※16,384 x 16,384)

■まとめ

・この記事では簡単に「canvas要素」の事についてご紹介いたしました。「canvas要素」では組み合わせることで複雑な図形を描くことができたり、ペイントのような描画ツールを作成できたりします。まだまだ他にできることもたくさんあるので興味のある方は一度、使用し理解を深めてみてはいかがでしょうか。