前回までcanvasでは、コンテキストにプロパティを設定し、描画用の命令を実行するという手順で画面上に図形を描きました。

今回は図形の種類別に設定できる属性や書き方の概要を見ていきましょう!

直線・多角形

直線や多角形を描画するために必要な主なメソッド、プロパティは以下の通りです。

メソッド、プロパティ 説明
beginPath() パスをクリアする
moveTo(x,y) (x,y)座標に筆を下ろす
lineTo(x,y) (x,y)座標に筆を動かす
closePath() パスを閉じる(筆を始点まで動かす)
stroke() 筆が動いた軌跡を線として描く
fill() 筆が動いた軌跡の範囲を塗りつぶす
strokeStyle() 線を描画する際の色を指定する。
fillStyle() 塗りつぶしの色を指定する

パスを閉じた場合と閉じない場合、それぞれについて、塗りつぶし、軌跡で描いた4パターンのサンプルをいかに作ってみました。

例題

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		var ctx;
		function init() {
			var canvas = document.getElementById("canvas");
			ctx = canvas.getContext("2d");
			ctx.strokeStyle = "#ff0000"
			ctx.fillStyle = "#00ff00"
			drawTriangle(100, 10, false, false);
			drawTriangle(200, 10, true, false);
			drawTriangle(300, 10, false, true);
			drawTriangle(400, 10, true, true);
		}

		function drawTriangle(x,y, isClose, isFill) {
			ctx.beginPath();
			ctx.moveTo(x,y);
			ctx.lineTo(x+80,y);
			ctx.lineTo(x+80,y+80);

			if(isClose) {
				ctx.closePath();
			}

			if(isFill) {
				ctx.fill();
			} else {
				ctx.stroke();
			}
		}
	</script>
</head>
<body onload="init()">
	<canvas id="canvas" width="500" height="100"></canvas>
</body>
</html>

実行結果

パスを初期化してない、もしくは、パスを閉じていないため、意図した描画にならないことはよくある事です。

線を描画する時は必ずbeginPath()を実行する習慣をつけるようにしましょう。

演習

  1. マウスを押下した点から離した点までの線分を描画するページを作成してみましょう。
  2. マウスが押下した点から離した点までの軌跡を描画するページを作成してみましょう。

矩形

矩形を描画するために必要なメソッドは以下の通りです。

メソッド 説明
ctx.strokeStyle 線や輪郭の色
strokeRect(x, y, w, h) (x, y)を左上隅として、幅w、高さhの矩形の輪郭を描く。
fillRect(x, y, w, h) (x, y)を左上隅として、幅w、高さhの矩形を塗りつぶす。
clearRect(x, y, w, h) (x, y)を左上隅として、幅w、高さhの矩形をクリアする。

矩形の描画はパスに影響を与えないのでbeginPath()やclosePath()を実行する必要はありません。

例題

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		var ctx;
		function init() {
			var canvas = document.getElementById("canvas");
			ctx = canvas.getContext("2d");

			ctx.strokeStyle = "#ff0000"
			ctx.strokeRect(10, 10, 80, 80)

			ctx.fillStyle = "#00ff00"
			ctx.fillRect(110, 10, 80, 80)
			ctx.fillRect(210, 10, 80, 80)
			ctx.clearRect(230, 30, 40, 40)
		}
	</script>
</head>
<body onload="init()">
	<canvas id="canvas" width="300" height="100"></canvas>
</body>
</html>

実行結果

円、円弧

円を描画するために必要なメソッドは以下の通りです。

arc(x, y, radius, startAngle, endAngle, anticlockwise)

(x, y)を中心とし、半径radiusで、startAngleからendAngleまでの弧のパスを描きます。

startAngleは円弧の描画開始角度、endAngleは描画終了

arcは単にパスを描くだけのメソッドなので、実際に描画するためには、stroke()かfill()を実行する必要がある事に注意しましょう。

角度はラジアンという単位で指定します。これは1回転(360度) を2*π(=3.1415…*2)とする単位です。度数からラジアンへの返還は度数*π÷180で求められます。

例えば、60度はラジアンで表すと60*π÷180=π÷3となります。

anticlockwiseにtrueを指定すると反時計回り,falseで時計回りとなります。

例題

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		var ctx;
		function init () {
			var canvas = document.getElementById("canvas")
			ctx = canvas.getContext("2d")

			ctx.strokeStyle = "#ff0000";
			ctx.fillStyle = "#00ffff";
			ctx.lineWidth = 5;

			ctx.beginPath();//1:円
			ctx.arc(100, 50, 30, 0, 2*Math.PI);
			ctx.closePath();
			ctx.fill();

			ctx.beginPath();//2:扇型(時計回り)
			ctx.moveTo(200, 50);
			ctx.arc(200, 50, 30, 0, Math.PI/3);
			ctx.closePath();
			ctx.stroke();

			ctx.beginPath();//3:扇型(反時計回り)
			ctx.moveTo(300, 50);
			ctx.arc(300, 50, 30, 0, Math.PI/3, true);
			ctx.closePath();
			ctx.stroke();
			
			ctx.beginPath();//4:扇子(反時計回り)
			ctx.moveTo(400, 50);
			ctx.arc(400, 50, 30, -1*Math.PI/6, Math.PI/6, true)
			ctx.closePath();
			ctx.fill();

			ctx.beginPath();//5:円弧のパスのみ
			ctx.arc(500, 50, 30, 0, 2*Math.PI/3)
			ctx.fill();
		}
	</script>
</head>
<body onload="init()">
	<canvas id="canvas" width="600" height="400"></canvas>
</body>
</html>

上記のサンパルにおけるパラメータと実際の様子を次に示しました。

実行結果

円の場合は、開始角に0、終了角に2*πを指定します。

円弧の場合は開始角と終了角を指定しますが、円弧を描画する方向によって結果が大きく異なりますので注意が必要です。

文字

数字を描画するために必要なメソッドは以下の通りです。

メソッド 説明
strokeText(text, x, y) x,yの輪郭を描く
fillText(text, x, y) x,y座標を起点としてtextを塗りつぶす

例題

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		var ctx;
		function init () {
			var canvas = document.getElementById("canvas");
			ctx = canvas.getContext("2d");

			ctx.font = "36px 'Time New Roman'";
			ctx.strokeStyle = "blue";
			ctx.strokeText("strokeTextによる文字", 10, 50);
		}
	</script>
</head>
<body onload="init()">
	<canvas id="canvas" width="400" height="120"></canvas>
</body>
</html>

実行結果

画像

画像を描画するためのメソッドは以下の通りです。

メソッド 説明
draw(image, x, y) x,y位置に画像imgを描画します。
draw(image, x, y, w, h) x,y位置にw,hサイズで画像imgを描画します。
draw(image, sx, sy, sw, sh, x, y, w, h) x,y位置にw,hサイズで画像imgのsx,syからsw,shまでの画像を描画します。

例題

<!DOCTYPE html>
<html>
<head>
	<style>
		#field {
			width: 600px;
			height: 800px;
		}
	</style>
	<script>
		function init () {
			var squre = new Image();
			var field = document.getElementById("field");
			var ctx = field.getContext("2d")

			squre.src = "https://dripcoke.com/wp-content/uploads/2019/11/dz_4.png";

			ctx.drawImage(squre, 10, 10);
			ctx.drawImage(squre, 200, 10, 100, 200);
			ctx.drawImage(squre, 0, 0, 10, 10, 10, 200, 200, 100);
		}
	</script>
</head>
<body onload="init()">
	<canvas id="field" width="800" height="800"></canvas>
	<img src="https://dripcoke.com/wp-content/uploads/2019/11/dz_4.png" style="display: none;">
</body>
</html>

実行結果

canvasの基本

Webゲーム開発

プログラミングメイン