<canvas> - キャンバス

目次

概要

形式
<canvas>～</canvas>
サポート
https://caniuse.com/mdn-html_elements_canvas
カテゴリ
フローコンテンツ
フレージングコンテンツ
エンベデッドコンテンツ
パルパブルコンテンツ
親要素
エンベデッドコンテンツ を子要素に持てるもの
子要素
HTML 5.2 の場合: トランスペアレント要素
HTML Living Standard の場合: a 要素、semap 属性付きの img 要素、button 要素、type 属性が checkbox, radio または button の input 要素、multiple 属性が指定された select 要素、表示サイズが 1 よりも大きな select 要素を除くインタラクティブコンテンツ を子孫に持たない、および、tabindex が指定されたものを除く インタラクティブ要素 以外の トランスペアレント要素。
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性
width
height

説明

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

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

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

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

属性

グローバル属性
詳細は グローバル属性 を参照してください。
width=n
LS/H5/e9/Ch/Fx/Sa/Op
横幅を指定します。
height=n
LS/H5/e9/Ch/Fx/Sa/Op
縦幅を指定します。

使用例

HTML
<html>
<head>
<title>CANVAS TEST</title>
<!--[if lt IE 9]>                               // Explorer Canvasを読み込む
<script src="lib/excanvas.js"></script>
<![endif]-->
<script>
window.addEventListener('load', 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>
表示

詳細

JavaScript
// キャンバス要素を得る
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);
Copyright (C) 2011-2017 杜甫々
初版:2011年5月31日 最終更新:2017年12月31日
https://www.tohoho-web.com/html/canvas.htm