＜canvas要素＞ - グラフィックの描画

公開日: 2017/02/09

canvas要素は、CANVASというウェブ技術を使って、グラフィックを描画するためのスペースとなります。操作はJavaScriptで行ないます。この要素を使用する場合、他に適切な要素がないか検討して下さい。例えば、ただ画像を表示するだけならimg要素で十分です。

概要

名前: canvas
カテゴリー: Flow content; Phrasing content; Embedded content; Palpable content
配置できる場所: Embedded contentが期待される場所。
コンテンツモデル: Transparent content。ただし、Interactive contentの先祖になってはいけない。
タグの省略: 開始タグも終了タグも省略できません。
DOM Interface: HTMLCanvasElement
仕様書: https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element

属性

width

座標の横幅。省略した場合、300になる。

height

座標の高さ。省略した場合、150になる。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

canvas要素で必ず理解しておかなければいけないのは、座標のサイズが決まる仕組みです。座標の横幅はwidth属性、高さはheight属性で決まります。これらの属性を省略した場合、横幅は300、高さは150に設定されてしまいます。座標のサイズはスタイルシートでは調整できません。

HTML

<!-- 座標のサイズは、300x150になる -->
<canvas></canvas>

<!-- 座標のサイズは、250x200になる -->
<canvas width="250" height="200"></canvas>

スタイルシートで指定する横幅と高さは座標のサイズではありません。あくまでも、座標に描いたグラフィックをそのサイズまで広げたもの、または、縮めたものです。

CSS

/* 描いた結果をこのサイズで表示する */
canvas {
	width: 600px ;
	height: 600px ;
}

次の例を見て下さい。canvas要素にwidth属性、height属性を指定せず、スタイルシートで200x200のサイズにしたものです。座標のサイズが決まる仕組みを知らず、200x200の座標を想定して真ん中に正円を描くと、思わぬ結果になってしまいます。座標とスタイルシートでアスペクト比が違うため、引き伸ばされてしまっています。

HTML

<!-- 座標のサイズは、300x150になる -->
<canvas></canvas>

CSS

/* 描いた結果をこのサイズで表示する */
canvas {
	width: 200px ;
	height: 200px ;
	border: 1px solid #000 ;
}

JavaScript

// (100, 100)を中心として、半径50の円
context.arc( 100, 100, 50, 0, 360 ) ;

canvas要素にwidth属性、height属性にそれぞれ200を指定したものです。200x200の座標を想定して真ん中に正円を描くと、その通り、真ん中に正円が描かれます。座標とスタイルシートでアスペクト比が同じため、正円が崩れることもありません。

HTML

<!-- 座標のサイズは、200x200になる -->
<canvas width="200" height="200"></canvas>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜canvas要素＞ - グラフィックの描画</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/canvas/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>canvas要素は、グラフィックを描画するためのスペースです。width属性とheight属性で座標のサイズを決めて、スタイルシートで実際に表示されるサイズを決めます。</p>

<canvas width="200" height="200"></canvas>
<script>
// canvas要素の取得
var canvasElement = document.querySelector( "canvas" ) ;

// コンテキストの取得
var context = canvasElement.getContext( "2d" ) ;

// 描画
context.fillStyle = "#d36015" ;
context.fillRect( 0,0, 200,200 ) ;

context.fillStyle = "#2660a1" ;
context.fillRect( 50,50, 100,100 ) ;
</script>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/674/"> <meta charset="utf-8"> <title>【デモ】＜canvas要素＞ - グラフィックの描画</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/canvas/"> </head> <body>

<p>canvas要素は、グラフィックを描画するためのスペースです。width属性とheight属性で座標のサイズを決めて、スタイルシートで実際に表示されるサイズを決めます。</p> <canvas width="200" height="200"></canvas>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

// canvas要素の取得 var canvasElement = document.querySelector( "canvas" ) ; // コンテキストの取得 var context = canvasElement.getContext( "2d" ) ; // 描画 context.fillStyle = "#d36015" ; context.fillRect( 0,0, 200,200 ) ; context.fillStyle = "#2660a1" ; context.fillRect( 50,50, 100,100 ) ;

</script>