公開日： 2016/06/18
最終更新日：2018/05/16

Canvasを使って動きのある図形を描写する

1 Canavasでキー操作によって動く図形を描画
2 処理概要
3 arcメソッドについて
4 Math.PIについて

Canavasでキー操作によって動く図形を描画

カーソルキーを押すと、その方向に口を開閉します。

■HTML

<canvas width="300" height="300" id="canvas"></canvas>

1	<canvas width="300" height="300" id="canvas"></canvas>

■JavaScript

var ctx, x = 150, y = 150, isKeyDown, isOpen = true, rotate = 0;
//オブジェクトの取得
function gobj(id) {
	return document.getElementById(id);
}
function init20160618001() {
	var canvas = gobj("canvas");
	ctx = canvas.getContext("2d");
	document.onkeydown = mykeydown;
	document.onkeyup = keyup;
	setInterval(tick, 200);	//200ミリ秒ごとに繰り返し
}
//ページがロードされた時にメソッドを実行
document.body.onload = init20160618001;
function tick() {
	isOpen = !isOpen;	//isOpenを反転(true<=>false)
	paint();
}
//キーが押下されると実行されるメソッド
//押下されたキーによって図形の回転方向を指定
function mykeydown(e) {
	switch (e.keyCode) {
		case 37: rotate = Math.PI;
		break;	//left
		case 38: rotate = -Math.PI / 2;
		break;	//up
		case 39: rotate = 0;
		break;	//right
		case 40: rotate = +Math.PI / 2;
		break;	//down
	}
	isKeyDown = true;
}
//キーボードのキーが押され、上がった時に実行されるメソッド
function keyup(e) {
	isKeyDown = false;
}
//canvasにより図形を描画
function paint() {
	//背景の矩形を描画
	ctx.fillStyle = "black";
	ctx.fillRect(0, 0, 300, 300);
	//円を描く
	ctx.fillStyle = "yellow";
	ctx.beginPath();
	ctx.save();	//描写設定の現在の状態をスタックの最後に追加
	ctx.translate(x,y);	//座標をずらして、再描画
	ctx.rotate(rotate);	//図形を回転させる
	//欠けている部分を描写
	ctx.moveTo(0, 0);
	if (isOpen) {
		//-Math.PI / 4 = -45度 = 320度
		//Math.PI / 4 = 45度
		ctx.arc(0, 0, 30, -Math.PI / 4, Math.PI / 4, true);
	}
	else {
		//始点 = 終点のため、通常の円を描く
		ctx.arc(0, 0, 30, 0, Math.PI * 2, true);
	}
	ctx.restore();	//スタックの最後の状態を取り出す
	ctx.fill();
}

var ctx, x = 150, y = 150, isKeyDown, isOpen = true, rotate = 0;

//オブジェクトの取得

function gobj(id) {

return document.getElementById(id);

}

function init20160618001() {

var canvas = gobj("canvas");

ctx = canvas.getContext("2d");

document.onkeydown = mykeydown;

document.onkeyup = keyup;

setInterval(tick, 200); //200ミリ秒ごとに繰り返し

}

//ページがロードされた時にメソッドを実行

document.body.onload = init20160618001;

function tick() {

isOpen = !isOpen; //isOpenを反転(true<=>false)

paint();

}

//キーが押下されると実行されるメソッド

//押下されたキーによって図形の回転方向を指定

function mykeydown(e) {

switch (e.keyCode) {

case 37: rotate = Math.PI;

break; //left

case 38: rotate = -Math.PI / 2;

break; //up

case 39: rotate = 0;

break; //right

case 40: rotate = +Math.PI / 2;

break; //down

}

isKeyDown = true;

}

//キーボードのキーが押され、上がった時に実行されるメソッド

function keyup(e) {

isKeyDown = false;

}

//canvasにより図形を描画

function paint() {

//背景の矩形を描画

ctx.fillStyle = "black";

ctx.fillRect(0, 0, 300, 300);

//円を描く

ctx.fillStyle = "yellow";

ctx.beginPath();

ctx.save(); //描写設定の現在の状態をスタックの最後に追加

ctx.translate(x,y); //座標をずらして、再描画

ctx.rotate(rotate); //図形を回転させる

//欠けている部分を描写

ctx.moveTo(0, 0);

if (isOpen) {

//-Math.PI / 4 = -45度 = 320度

//Math.PI / 4 = 45度

ctx.arc(0, 0, 30, -Math.PI / 4, Math.PI / 4, true);

}

else {

//始点 = 終点のため、通常の円を描く

ctx.arc(0, 0, 30, 0, Math.PI * 2, true);

}

ctx.restore(); //スタックの最後の状態を取り出す

ctx.fill();

}

処理概要

・ページロード時に、initが実行される
・init内のsetIntervalによって、tickを200ミリ秒おきに実行
・tick内で口の開閉フラグを反転、paintを呼び出し
・paintにて口の開閉フラグの状態に応じて図形を描写
・カーソルキー押下時、押下したキーに応じて、図形の回転度数を設定(例：↑なら-90度回転)