<canvas> - キャンバス

トップ > HTMLリファレンス > <canvas>

概要

項目説明
形式<canvas>~</canvas>
サポートH5 / e9 / Ch1 / Fx1.5 / Sa1.3 / Op9
カテゴリフローコンテンツ, フレージングコンテンツ, エンベデッドコンテンツ, パルパブルコンテンツ
親要素エンベデッドコンテンツ を子要素に持てるもの
子要素トランスペアレント
タグの省略開始タグ:必須 / 終了タグ:必須

説明

canvas は HTML5 の新要素で、図形を描画するためのキャンバスをサポートします。<canvas>~</canvas> で用意した矩形領域に JavaScript を用いて線や画像を表示します。

Internet Explorer 9以降、Firefox 1.5以降、Safari 1.3以降、Opera 9以降で、平面(2D)コンテキストがサポートされています。

Google が公開した JavaScriptライブラリ 「Explorer Canvas」を用いることで、IE6/IE7/IE8 でも canvas を VML でシミュレートできます。ブラウザ利用者がプラグインなどをインストールしておく必要は無く、Web製作者側が、JavaScript のライブラリをひとつ読み込ませるだけで実現可能です。多少の制限はあるそうですが、かなり使い物になりそうです。

Canvas 2Dリファレンス

キャンバスで使用する機能の一覧は下記を参照してください。

属性

【固有属性】
属性意味
width=nH5/e9/Ch/Fx/Sa/Op。横幅を指定します。
height=nH5/e9/Ch/Fx/Sa/Op。縦幅を指定します。
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

HTML
<html>
<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 = '#ffcccc';
    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>
</head>
<body>
 <canvas id="cv1" width="140" height="100"></canvas>
</body>
</html>
表示

主な機能

// キャンバス要素を得る
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);

関連項目

<audio><video>

Copyright (C) 2011-2015 杜甫々
初版:2011年5月31日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/canvas.htm