canvasの使い方、基本中の基本

HTML5から適用されたcanvas要素には、JavaScriptを使って好きなものを書き込めます。
このページでは入門者向けにcanvasの使い方を基本事項に絞って1から説明します。

目次

canvas要素を配置

さっそく、canvas要素を配置します。
どこにcanvasがあるのかわかりやすくするために、スタイルシートで枠線をつけておきます。

<canvas></canvas>

<style>
canvas {
  border: 1px solid silver;
}
</style>

canvasのサイズを指定しない場合、デフォルト値で300px,150pxとなっています。
次にサイズを指定して、idも記述します。


<canvas id="sample" width="200" height="150"></canvas>

これで指定されたサイズで表示されます。今後はこのキャンバスサイズを元にいろいろと描いていきます。

座標について

座標は左上が(0,0)で右に向かってxが増加、下に向かってyが増加します。 下図のようになります。

矩形を描いてみる

矩形(四角形)を描いてみます。


<canvas id="a" width="200" height="150"></canvas>
<script>

var canvas = document.getElementById("a");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(10,10,20,20);

</script>

注意:以後はcanvas要素とscript要素は省略し、JavaScript部分だけを記述していきます。

canvasに対して何かを描く場合、「描画コンテキスト」を取得する必要があります。 それがgetContext("2d") です。引数は"2d"を指定してください(2次元の略)。

そして取得した「描画コンテキスト」に対してプロパティを設定したり、メソッドを実行して描画します。

fillStyleで塗りぶつしの色を指定しています。色の指定方法は、CSSで指定するフォーマットに対応しています。

fillRect(x, y, width, height)は矩形を描画します。fillとある通り、塗りつぶしです。

矩形(塗りつぶしではない)を描いてみる

次は塗りつぶしではない矩形を描いてみます。


var canvas = document.getElementById("b");
var context = canvas.getContext("2d");
context.strokStyle = "red";
context.strokeRect(20,20,30,30);

strokeStyleで枠線の色を指定し、 strokeRect(x, y, width, height)は塗りつぶしでない矩形を描きます。

直線を引いてみる

次はt直線を引いてみます。座標(0,0)から(200,150)に向かって直線を引きます。 線の色と太さも指定してみます。


var canvas = document.getElementById("c");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0,0);              // 始点
context.lineTo(200,150);          // 終点
context.strokeStyle = "black";    // 色
context.lineWidth = 5;            // 太さ
context.stroke();

まず、beginPath()でパスを初期化します。 canvasにはパスという概念があり、鉛筆による下書きだと思うとよいでしょう。

beginPath()からlineTo()までが下書き部分で、最後のstroke()が実際に描画する命令です。

moveTo(x, y)は指定された座標へ移動します。(始点)

lineTo(x, y)は指定された座標まで線を描きます。(終点)

moveTo(x, y)とlineTo(x, y)でどこからどこまで線を引くかを設定していきます。

線の色は strokeStyle で、線の太さは lineWidth で指定しています。

そして最後にstroke()で実際に描画します。

流れをまとめると次のようになります。

  • パスの初期化 beginPath()
  • 始点を設定 moveTo()
  • 終点を設定 lineTo()
  • 色の設定があれば設定 strokeStyle
  • 線の太さは lineWidth (デフォルトは1.0)
  • 描画 stroke()

グリッドを描いてみる

グリッドは直線の知識を応用すればできます。x方向、y方向にそれぞれループでまわしてあげるだけです。


var i = 0;
var canvas = document.getElementById("d");
var context = canvas.getContext("2d");
context.beginPath();

// 縦線を横に並べる
for (i = 10; i < 200; i += 10){
	context.moveTo(i, 0);
	context.lineTo(i, 150);
}
// 横線を縦に並べる
for (i = 10; i < 150; i += 10){
	context.moveTo(0, i);
	context.lineTo(200, i);
}

context.strokeStyle = "silver";
context.stroke();

コードは上の通りです。特に難しいところはないと思います。

三角形を描いてみる

次は三角形を描いてみます。塗りつぶしありと、塗りつぶしなしの三角形を描きます。


var canvas = document.getElementById("e");
var context = canvas.getContext("2d");

// 塗りつぶしなしの三角形
context.beginPath();
context.moveTo(10,10);
context.lineTo(50,10);
context.lineTo(30,40);
context.closePath();
context.stroke();

// 塗りつぶしありの三角形
context.beginPath();
context.moveTo(110,50);
context.lineTo(150,50);
context.lineTo(130,80);
context.closePath();
context.fill();

新しいメソッドとしてclosePath()とfill()が出てきました。

closePath()は始点と終点を結んでくれる機能があります。

fill()は塗りつぶし機能です。

fill()で塗りつぶす場合は、closePath()でパスを閉じてください。 closePath()がないと、fill()がどの範囲を塗りつぶせばいいのかが わかりません。

テキストを描いてみる

テキストも描けますので、やってみましょう。


var canvas = document.getElementById("f");
var context = canvas.getContext("2d");

context.font = "normal 16x sans-serif";
context.fillText("test", 10,20);

フォントサイズやフォントはfontで指定します。(CSSのfont規則に指定できるものを指定します)

fillText(String, x, y)でテキストを描きます。

HTML・CSS入門