canvas

提供: ASCII.jp HTMLリファレンス

ver.9~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 グラフィック描画用のキャンバス
読み方 キャンバス

カテゴリー

フロー・コンテンツ/フレージング・コンテンツ/エンベディッド・コンテンツ

親にできる要素/カテゴリー

エンベディッド・コンテンツが期待される個所

子にできる要素/カテゴリー

トランスペアレント

<canvas 属性="値">~</canvas>

属性 概要
width 文字列 キャンバスの幅
height 文字列 キャンバスの高さ

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 canvas要素は、解像度依存のグラフィック出力用キャンバスを示します。グラフやゲームの画像などをその場で出力するのに使えます。

 canvas内部の描画は、スクリプト(通常はJavaScript)で指定します。canvas要素自身は、キャンバスの領域を出力するだけです。

 width属性とheight属性で、キャンバスの幅と高さを指定します。width、height属性の標準値は、それぞれ300、150です。

 canvas要素にコンテンツを入れると、canvas要素に対応していないWebブラウザーやスクリプトがオフの環境では、そのコンテンツがフォールバックとして表示されます。

 なお、Internet Explorer 8はcanvas要素に対応していません。

サンプル

(body要素の内部のみ掲載)

<h1>リサジュー曲線</h1>
<p>
<canvas id="canvas" width="400" height="400">
このWebブラウザはcanvasの描画に対応していません。
</canvas>
</p>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var rad = 3.14159265358979 / 180;
ctx.beginPath();
ctx.moveTo(390, 200);
for (var i = 0; i <= 360; i++) {
    var x = Math.cos(3 * i * rad) * 190 + 200;
    var y = Math.sin(5 * i * rad) * 190 + 200;
    ctx.lineTo(x, y);
}
ctx.stroke();
ctx.closePath();
</script>

サンプル実行画像

よくある間違い、勘違い

 他に適切な要素がないときに限って、canvas要素を使うようにするべきです。

Powered by Web Professional

目次