<canvas> * - キャンバス(新)

■ 概要

項  目説  明
記述形式 <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
【グローバル属性】 accesskeyclasscontenteditable * dir
hidden *idlangspellcheck *style
tabindextitletranslate *
【ARIA role属性】
指定可能な値 (役割)
任意の値 (役割)
【ARIA aria-* 属性】
指定可能なもの
ARIA グローバル状態とプロパティ
指定可能な役割の任意の状態とプロパティ   

■ CSSプロパティ

種  類名  称
【よく使うもの】

■ 使用例

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);