項 目 | 説 明 |
---|---|
記述形式 | <canvas width="幅" height="高さ">~</canvas> |
対応ブラウザー | H5+ / e9+ / Fx1.5+ / Op9+ / Ch1+ / Sa3 |
種 類 (カテゴリー) |
フロー・コンテンツ,フレージング・コンテンツ , エンベッディッド・コンテンツ,パルパブル・コンテンツ |
置ける場所 | エンベッディッド・コンテンツが記入できる場所 |
内包要素 (コンテンツ・モデル) |
親要素の内包要素 (コンテンツ・モデル: トランスペアレント) |
<canvas> は HTML5 の新要素で,図形を描画するためのキャンバスを作成します。 <canvas>~</canvas> で用意した矩形領域に JavaScript を用いて線や画像を表示します。
現時点(2011年5月)では,IE9 以降,Firefox 1.5 以降,Opera 9 以降,Safari 1.3 以降が平面(2D)コンテキストをサポートしています。
Google が公開した JavaScript ライブラリ 「Explorer Canvas」を用いることで,IE6/IE7/IE8 でも canvas要素を VML でシミュレートできます。 ブラウザー利用者がプラグインなどをインストールしておく必要は無く,Web 製作者側が,JavaScript のライブラリをひとつ読み込ませるだけで実現可能です。 多少の制限はあるそうですが,かなり使い物になりそうです。
なお,width属性とheight属性の既定値は,それぞれ,300 と 150 です。 これら以外の大きさで使用したい場合は,width属性とheight属性により指定します。
種 類 | 名 称 |
---|---|
【固有属性】 | width, height |
【グローバル属性】 | accesskey,class,contenteditable *,
dir, hidden *,id, lang,spellcheck *,style, tabindex,title,translate * |
【ARIA role属性】 で 指定可能な値 (役割) |
任意の値 (役割) |
【ARIA aria-* 属性】 で 指定可能なもの |
ARIA グローバル状態とプロパティ, 指定可能な役割の任意の状態とプロパティ |
種 類 | 名 称 |
---|---|
【よく使うもの】 |
HTMLソース | |
---|---|
JavaScript <head> ~ </head> |
<title>CANVAS TEST</title> <!--[if lt IE 9]> // Explorer Canvasを読み込む <script type="text/javascript" src="lib/excanvas.js"></script> <![endif]--> <script type="text/javascript"> <!-- window.onload = function() { var cv = document.getElementById('cv1'); // 要素を得る if (!cv) { return; } var ct = cv.getContext('2d'); // 2D(平面)コンテキストを得る if (!ct) { return; } ct.fillStyle = '#ffeeee'; ct.fillRect(0, 0, cv.width, cv.height); // 矩形を塗りつぶす ct.strokeStyle = '#ff0000'; ct.strokeRect(0, 0, cv.width, cv.height); // 矩形を描画する ct.beginPath(); ct.strokeStyle = '#ff0000'; ct.arc(70, 50, 40, 0, Math.PI * 2, false); // 円を描画する ct.stroke(); ct.beginPath(); ct.strokeStyle = '#0000ff'; ct.moveTo(0, 0); ct.lineTo(140, 100); // 線を描画する ct.stroke(); } // --> </script> |
HTML <body> ~ </body> |
<canvas id="cv1" width="140" height="100"></canvas> |
ブラウザー 表示例 |
---|
// キャンバス要素を得る cv = document.getElementById(id); // 2Dコンテキストを得る ct = cv.getContext('2d'); // 描画を開始する ct.beginPath(); // 描画した結果を表示する ct.stroke(); // 線の色を設定する ct.strokeStyle = '#ff0000'; // 塗りつぶしの色を設定する ct.fillStyle = '#ff0000'; // ペンの位置を移動させる ct.moveTo(x, y); // 現在のペン位置を起点に線をひく ct.lineTo(x, y); // 矩形を描画する (beginPath()/stroke()は不要) ct.strokeRect(x, y, w, h); // 矩形を塗り潰す (beginPath()/stroke()は不要) ct.fillRect(x, y, w, h);