[벽돌깨기]html 캔버스로 게임 만들기 - 1(캔버스 생성)

추억의 벽돌깨기를 HTML5로 만들 수 있습니다

코드는 MDN web docs에 나온 내용을 복습하면서 만든 벽돌깨기 게임입니다

 

캔버스 생성

HTML 구조는 간단하게 <canvas> 태그 하나면 준비가 끝납니다

캔버스 태그 id는 myCanvas로 만들고

캔버스의 가로 세로 길이를 결정하는 속성

width, height를 사용해서

width(너비)가 480이고 height(높이)가 320인 캔버스 태그를 만듭니다

<canvas id="myCanvas" width="480" height="320"></canvas>

스크립트 작성

HTML 태그는 <canvas> 태그 하나로 끝났습니다

벽돌깨기의 핵심은 <script> 태그로 구현합니다

캔버스의

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

다음은 빨간색 네모를 캔버스에 그리는 방법입니다

주의 : beginPath()와 closePath() 사이에 rect, fillStyle, fill이 있어야 합니다

ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

ctx는 canvas.getContext입니다

rect() 함수를 이용해서 직사각형을 정의했습니다

rect(X좌표, Y좌표, 너비, 높이)입니다

좌측에서 20 픽셀 상단에서 40픽셀

width(너비) 50 픽셀, height(높이) 50 픽셀을 나타냅니다

fillStyle은 fill() 메서드에서 칠해질 색상 값을 갖습니다

 

동그란 원을 그릴 수도 있습니다 방법은 조금 다릅니다

ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI*2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();

원은 arc() 함수를 사용해서 만듭니다

arc(X좌표, Y좌표, 원의 반지름, 시작 각도, 끝 각도, 그리는 방향)입니다

x, y는 원의 중심을 기준으로 삼습니다

원의 반지름은 원의 크기입니다

시작 각도와와 끝 각도는 원을 그릴 때 시작과 끝을 말합니다(라디안 값)

그리는 방향은 기본 값은 true이고 반시계 방향입니다

false로 설정하면 시계방향으로 그립니다 이 파라미터는 옵션입니다

fillStyle은 "green"으로 되어있습니다 방금 전 사각형은 16진수로 색을 나타낸 방법이고

원에 사용한 방법은 색상 키워드를 이용한 것으로 "green" 색으로 표시됩니다

 

fill과 stroke 차이

fill()은 안의 색상을 나타내고 stroke()을 이용하면 외곽선 색상을 나타낼 수 있습니다

ctx.beginPath();
ctx.arc(160, 100, 50, 0, Math.PI*2, false);
ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
ctx.stroke();
ctx.closePath();

위 코드를 붙여 넣고 외곽선만 있는 원이 생성됩니다