★HTML Living Standard リファレンス
<canvas>タグは、スクリプトで図形を描く際に使用します。
canvas要素は、ビットマップキャンバスをスクリプトに提供します。 canvas要素を使うと、グラフ、ゲームグラフィックス、アート、その他のビジュアルイメージを スクリプトを使って描くことができます。
<canvas>～</canvas>の内側に配置するcanvas要素の内容は、 canvas要素がサポートされていない環境で表示されるフォールバックコンテンツです。
canvas要素は、CSSで任意のサイズに設定できます。 また、canvas要素で作成されるビットマップは、object-fitプロパティの影響を受けます。
■属性
- width属性
- canvas要素のwidth属性は、キャンバス画面の幅（水平寸法）を制御します。 値は正の整数で指定します。（初期値は300）
- height属性
- canvas要素のheight属性は、キャンバス画面の高さ（縦寸法）を制御します。 値は正の整数で指定します。（初期値は150）
■使用例
以下のサンプルは、 Canvasの仕様で定義されている fillRect()メソッド、strokeRect()メソッド、arc()メソッドを使用して、 四角形、四角の枠線、半円を描いています。
CSSのbackground-color:yellow;の指定でcanvas要素の背景色を黄色くして、 canvas要素の領域（幅300×高さ150）を分かりやすくしています。
HTMLソース
<body onLoad="sample()">
<script>
function sample() {
//描画コンテキストの取得
const canvas1 = document.getElementById('sample1');
if (canvas1.getContext) {
const context1 = canvas1.getContext('2d');
//左から20上から40の位置に、幅50高さ100の四角形を描く
context1.fillRect(20,40,50,100);
//色を指定する
context1.strokeStyle = 'rgb(00,00,255)'; //枠線の色は青
context1.fillStyle = 'rgb(255,00,00)'; //塗りつぶしの色は赤
//左から200上から80の位置に、幅100高さ50の四角の枠線を描く
context1.strokeRect(200,80,100,50);
//左から150上から75の位置に、半径60の半円を反時計回り（左回り）で描く
context1.arc(150,75,60,Math.PI*1,Math.PI*2,true);
context1.fill();
}
}
</script>
<canvas id="sample1" style="background-color:yellow;">
<p>図形を表示するには、canvasタグをサポートしたブラウザが必要です。</p>
</canvas>ブラウザ上の表示
■使用例
以下のサンプルは、 Canvasの仕様で定義されている fillRect()メソッドで赤い長方形を描き、 getImageData()メソッドでそのイメージデータを取得して、 その内容をコンソールにログ出力しています。
HTMLソース
<canvas id="sample2"></canvas>
<script>
const canvas2 = document.getElementById('sample2');
const context2 = canvas2.getContext('2d', {colorSpace:'display-p3'});
// 赤い長方形を描きます。
context2.fillStyle = "#FF0000";
context2.fillRect(0, 0, 64, 64);
// イメージデータを取得します。
const pixels = context2.getImageData(0, 0, 1, 1);
//「display-p3」が出力されます。
console.log(pixels.colorSpace);
// 赤色のRGB値 234、51、35 が出力されます。
console.log(pixels.data[0]);
console.log(pixels.data[1]);
console.log(pixels.data[2]);
</script>ブラウザ上の表示
■使用例
以下のサンプルは、canvas要素を使用してランダムな線をタイマー描画するスクリプトの例です。
HTMLソース
<canvas width="800" height="450"></canvas>
<script>
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
var lastX = context.canvas.width * Math.random();
var lastY = context.canvas.height * Math.random();
var hue = 0;
function line() {
context.save();
context.translate(context.canvas.width/2, context.canvas.height/2);
context.scale(0.9, 0.9);
context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
context.moveTo(lastX, lastY);
lastX = context.canvas.width * Math.random();
lastY = context.canvas.height * Math.random();
context.bezierCurveTo(context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
lastX, lastY);
hue = hue + 10 * Math.random();
context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
context.shadowColor = 'white';
context.shadowBlur = 10;
context.stroke();
context.restore();
}
setInterval(line, 50);
function blank() {
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
setInterval(blank, 40);
</script>ブラウザ上の表示
より適切な要素がないか検討する
より適切な要素が利用できるなら、canvas要素を使用しないでください。 例えば、ページの見出しをレンダリングするためにcanvas要素を使用するのは不適切です。 見出しの表示がグラフィックを重視する場合は、 適切な要素（通常はh1要素）を使用してマークアップし、 CSSなどを使用してスタイルを設定するべきでしょう。
■関連項目
- <script> …… スクリプトを表す
- <noscript> …… スクリプトが無効な環境向けの内容を表す
- <canvas> …… スクリプトで図形を描く
Sponsors
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
