웹 환경을 구축하는 데 있어 다양한 도형들을 편리하게 그려주는
HTML태그 canvas를 소개하겠다.
canvas 좌표계는 아래와 같이 그려지는데, Y축의 양의 방향이 아래쪽으로 향한다는 점에 유의할 것!
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="myCanvas" width='400' height='400'></canvas>
<script src="canvas.js"></script>
</body>
</html>canvas.js
// canvas 설정
const canvas = document.getElementById('myCanvas');
canvas.style.backgroundColor = "navy";
const context = canvas.getContext('2d');
// 사각형 그리기
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.rect(canvas.width / 2, canvas.height / 2, 100, 120); // context.rect(시작 x좌표, 시작 y좌표, 가로 길이, 세로 길이)
context.fillStyle = "red";
context.fill();
context.closePath();
===>
기본적인 구성은 다음과 같다.
-
context.clearRect() :
canvas에서 그리고자 하는 특정 영역에 있던 내용물들을 지워줌 -
context.beginPath(), context.closePath() :
도형을 그리기 전후에 선언
("나 이제 그릴거야~" or "그만 그릴래~") -
context.fillRect() :
직사각형 영역 내부를 칠하는 작업 -
(참고) context.strokeRect() :
직사각형 윤곽만을 그리는 작업
canvas가 제공하는 원시적인 도형은 오직 직사각형 하나뿐이지만,
하나 혹은 하나 이상의 path 와 여러 점으로 이어진 선을 통해 삼각형, 원, 이차곡선 등등 복잡한 도형들도 그릴 수 있다.
** 여러개의 도형들이 상호작용하는 애니메이션 효과를 쉽게 구현가능하게 해준다는 점이 마음에 든다.
이후 블로깅에는 canvas를 활용하여 만든 게임에 대한 소개글이 올라옵니당~~
참고 자료: https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage
진정한 배움은 가르침과 기록을 오가며 실현된다.