[1] 캔버스 기본 사용방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS canvas</title>
<script>
function loaded(){
var canvas = document.getElementById('canvas1');
//그림도구 객체 얻어오기
var context = canvas.getContext('2d');
//글씨 스타일 지정
context.fillStyle="red";
context.font="20px serif";
//그림 도구를 이용하여 글씨 그려보기
context.fillText('hello', 10 ,40); //글씨의 좌측 하단지점 좌표
context.fillText('hello', 0 , 300);
//글씨 윤곽선 그리기..
context.strokeStyle= 'blue';
context.strokeText('Hello',100,40);
// 사각형 그리기
context.fillStyle="green";
context.fillRect(10,50,100,40); // fillRect(x: number, y: number, w: number, h: number) : 좌상단 좌표, 넓이 ,높이
context.strokeStyle = "green";
context.strokeRect(120,50,100,40);
//직성 그리기
context.beginPath(); //선의 경로 작업 시작
context.moveTo(10,100); //선 시작 위치
context.lineTo(100,150); //끝지점
context.lineTo(150,120);
context.stroke(); //선 그리기
//사각형, 곡선, 원, 도형, 그라디언트, 패턴 등등의 작업 가능[p.423~p.432]
//이미지 그리기
//png, jpg같은 그림파일을 JS용 객체로 변환
var a = new Image();
a.src='./image/ms18.png';
//이미지파일을 로드하는 시간이 걸리기 때문에 곧바로 그리려고 하면 안그려 질 수 있음
a.onload = function(){
context.drawImage(a,10,100); //이미지의 좌상단 좌표 - 원본사이즈
context.drawImage(a,10,100,100,100); //좌표와 이미지 사이즈 지정
}
}
</script>
</head>
<body onload="loaded()">
<!-- 도화지 객체 -->
<canvas id="canvas1" width="400" height="300" style="border: 1px solid rebeccapurple;"></canvas>
</body>
</html>
캔버스로 게임 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS canvas Game</title>
<script>
//플레이어 이미지 객체 생성
var imgPlayer = new Image();
imgPlayer.src="./image/ms_01.png" //바디 하기 전에 이미지 로드하기 위해 밖에 다 선언
//
var x = 200, y=250; //이미지의 좌표
var w = 40, h=40; //이미지 절반 너비, 높이값
var dx = 1, dy= 1; //이 값이 음수 양수 인지에 따라 방향결정, 3이면 더 빨라짐
//
var imgBack = new Image();
imgBack.src="./image/bg.png"
function loaded(){
canvas = document.getElementById('c1');
context = canvas.getContext('2d');
//context.drawImage(imgPlayer, 200,250,80,80);
//일정시간마다 실행 1초당 100번
setInterval(runGame,10);
}
// 게임을 진행하는 코드
function runGame(){
moveAll();//캐릭터들 움직이기
draeAll();//화면 그리기
}
function moveAll(){
x += dx;
y += dy;
if(x <= w || x>=400-w) dx = -dx;
if(y <= h || y>=500-h) dy = -dy;
}
function draeAll(){
context.drawImage(imgBack,0,0,400,500);
context.drawImage(imgPlayer,x-w,y-h,w*2,h*2);
}
//방향키 눌렀을 때
function keydown(){
keycode= event.keyCode;
switch(keycode) {
case 37: dx = -3; break;//37 = 왼쪽
case 38: dy = -3; break; // 38 = 위
case 39: dx = 3; break; // 38 = 오른쪽
case 40: dy = 3; break; // 38 = 아래
default:dx=1; dy=1; //AUTO
}
}
//방향키 뗄 때
function keyup(){
keycode= event.keyCode;
if(keycode >=37 && keycode<=40){
dx=0;
dy=0;
}
}
</script>
</head>
<!-- onkeypress= 방향키 못알아먹음 / onkeydown = 대소 구변 안함 -->
<body onload="loaded()" onkeydown="keydown()" onkeyup="keyup()">
<canvas id="c1" width="400" height="500" style="border: 1px solid rebeccapurple;"></canvas>
</body>
</html>
보조기억장치