canvasの使い方、基本中の基本
このページでは入門者向けに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)でテキストを描きます。