캔바스 상의 오브제트 회전하기


키보드에서 A, D키를 눌러서 로켓의 발사방향을 설정하고 SPACE 키를 누르면 설정된 방향으로 로켓이 발사되어 이동하는 예제이다


사용된 로켓 이미지(rocket.png)



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>캔바스 상의 오브젝트 회전</title>
<style type="text/css">
canvas {border:1px solid black; background-color: rgb(220,220,255);}
</style>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
var canvas;
var ctx;
var rad = 270*Math.PI/180; //로켓이 오른쪽을 향하고 있는 이미지이므로 270도 회전하여 위를 향하도록 한다
var rocket;
var timer;
var xSpeed, ySpeed;
var x=0.0, y=0.0;

$(function(){
	canvas = $('#gameCanvas').get(0);
	ctx = canvas.getContext('2d');
	//캔바스는 원래 키보드 이벤트를 발생하지 않지만 페이지 내에서 사용하지 않는 탭인덱스를 설정해주면 키보드 이벤트가 발생한다
	canvas.tabIndex = 1000; 

	rocket = new Image();
	rocket.src = 'rocket.png';
	x = canvas.width/2;
	y = canvas.height-40
	$(rocket).load(function(){
		ctx.save();			// context 현상태 저장
		ctx.translate(x,y); //붓을 캔바스 중앙하단으로 이동
		ctx.rotate(rad);	//붓을 회전
		ctx.drawImage(rocket,-33,-40); //이미지 그리기
		ctx.restore();		// context 원상태 복귀
	});
	canvas.focus();
	
	//A,D키를 눌러 로켓의 발사방향을 설정하고, SPACE키로 발사한다
	$(canvas).on('keydown',function(evt){
		//alert(evt.which);
		if(evt.which==65){ //A, 좌회전
			rad -= 0.05;
		}else if(evt.which==68){ //D, 우회전
			rad += 0.05;
		}else if(evt.which==32){ // SPACE, 발사
			ySpeed = Math.sin(rad)*3; //기울기 및 속도 설정
			xSpeed = Math.cos(rad)*3;
			timer = setInterval(fire,33); // 이동
		}
		//발사방향으로 로켓 회전
		ctx.clearRect(0,0,canvas.width, canvas.height);
		ctx.save();
		ctx.translate(canvas.width/2,canvas.height-40);
		ctx.rotate(rad);
		ctx.drawImage(rocket,-33,-40)
		ctx.restore();
	});
});

//로켓 이동(setInterval()에 의해 주기적으로 호출됨)
function fire(){
	x += xSpeed;
	y += ySpeed;
	ctx.clearRect(0,0,canvas.width, canvas.height);
	ctx.save();
	ctx.translate(x,y);
	ctx.rotate(rad);
	ctx.drawImage(rocket,-33,-40)
	ctx.restore();
}
</script>
</head>
<body>
<p>
<canvas id="gameCanvas" width="400" height="300"></canvas>
</body>
</html>


저작자 표시
신고
Posted by cwisky