<canvas></canvas>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / パルパブル・コンテンツ
利用場所 エンベッディッド・コンテンツが置ける場所
内容 トランスペアレント(親要素のコンテンツモデルを継承)

canvas要素は、グラフィックスを描くための領域を作ります。


<canvas id="example" width="300" height="150"></canvas>

属性
任意属性
width="" 領域の幅 数値 ピクセル数 (初期値は 300
height="" 領域の高さ 数値 ピクセル数 (初期値は 150
グローバル属性
id="" 要素のID名 文字列 固有の識別名
  • width属性height属性を省略した場合は、300×150pxの領域が作成されることになります。

canvas要素を使用することで、グラフやゲームなどのグラフィックスを動的に描画できるようになります。

  • canvas要素は、描画する領域だけを作成します。そこに描かれる内容は、別途スクリプト(通常はJavaScript)で作成する必要があります。

グラフィックスの埋め込み方法

グラフィックスを表示するには、グラフィックスを生成するスクリプトそれを描画する領域(canvas要素)を関連付ける必要があります。

次の例では、canvas要素にid属性を指定して、canvasというID名によってスクリプトと領域とを関連付けています。

<canvas id="canvas"></canvas>

<script>

// 塗りつぶされた四角形を表示するスクリプト
var canvas = document.getElementById('canvas');

if (canvas && canvas.getContext) {

        var ctx = canvas.getContext('2d');
        ctx.fillRect(50,30, 200,90);

}

</script>

代替コンテンツについて

canvas要素に対応していない、またはスクリプトをオフにしている環境では、この要素の内容が利用されることになります。

次の例では、比率を表す円グラフの代替として、テキストによる情報をcanvas要素内に配置しています。

<canvas id="graph" width="300" height="300">

<p>お使いのブラウザでは、円グラフを表示することができませんでした。</p>
<p>世代別の比率は次のようになります。</p>

<dl>
<dt>20歳以下</dt><dd>15%</dd>
<dt>21歳~50歳</dt><dd>65%</dd>
<dt>51歳以上</dt><dd>20%</dd>
</dl>

</canvas>

canvas要素の内容について

canvas要素は、親要素のコンテンツ・モデルを継承します(トランスペアレント)。そのため、親要素の種類によっては、代替コンテンツとして配置できない要素もあるので注意が必要です。

<figure>

<canvas id="canvas">
<p>代替コンテンツ</p>
</canvas>

</figure>

例えば、上記の場合は問題ありませんが、次の例では文法違反となります。(p要素内にはフレージング・コンテンツしか配置できないため)

<p>

<canvas id="canvas">
<p>代替コンテンツ</p>
</canvas>

</p>

使用に関する注意事項

HTML5では、より適切な要素がある場合はcanvas要素を使うべきではないとしています。

例えば、グラフィカルに表現したいからといって、見出しにcanvas要素を使うのは不適切です。この場合は、h1-h6要素を用いた上でCSSなどで装飾するようにしましょう。

使用例

簡単な図形を描いた例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

#canvas {
background: #ffffff url(grid.gif) no-repeat;
}

</style>

<script>

window.onload = function() {

        var canvas = document.getElementById('canvas');

        if (!canvas || !canvas.getContext) { return false; }
        var ctx = canvas.getContext('2d');

        // 三角 + 線
        ctx.beginPath();
        ctx.moveTo(100, 40); // x, y
        ctx.lineTo(150, 120);
        ctx.lineTo(50, 120);
        ctx.closePath();
        ctx.strokeStyle = '#ff0000';
        ctx.stroke();

        // 四角 + 線
        ctx.strokeStyle = 'rgb(0,0,255)';
        ctx.strokeRect(200,40, 160,80); // x,y, width,height

        // 四角 + 塗りつぶし
        ctx.fillStyle = 'rgb(50%,50%,50%)';
        ctx.fillRect(220,60, 120,40);

        // 四角 + くり抜き
        ctx.clearRect(260,70, 40,20);

}

</script>

</head>
<body>

<canvas id="canvas" width="410" height="160">
<p>代替コンテンツ</p>
</canvas>

</body>
</html>

表示例

代替コンテンツ

  • 上記の図形は動きません。