Canvas API
canvas api 는 2D, 3D 를 표현할 수 있는 강력한 자바스크립트 api 이다. 간단한 2d 도형으로부터, 복잡한 3d 애니메이션까지를 자바스크립트로 구현할 수 있다. 여기서는 2d를 활용한 간단한 도형그리기만 작업해 보겠다.
canvas 시작하기(HTML)
1
| <canvas id="canvas"></canvas>
|
Javascript
1
2
3
4
5
| const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
|
const ctx = canvas.getContext("2d") 는 붓이라고 생각하면 된다. 그림을 그릴 수 있는 도구를 ctx 로 정의한다.- ctx 안에는 많은 메소드가 있다.
캔버스 크기 정하기
- 캔버스 크기의 경우 css파일, js 파일에서 모두 정의해 주어야 한다.
1
2
3
4
5
6
| // styles.css
canvas {
width: 800px;
height: 800px;
border: 5px solid black;
}
|
1
2
3
| // app.js
canvas.width = 800;
canvas.height = 800;
|
api 들
1
2
3
| cts.rect(40, 40, 100, 100);
ctx.fillStyle = "red";
ctx.fill();
|
ctx.rect() 는 네개의 파라미터를 갖는다. 도형의 시작지점 (x,y)와 width, height(100, 100) 이다.- 도형 이름만 적을 경우, 선은 생성되지만 보이지는 않는다. stroke 나 fill 로 채워 주어야 한다.
stroke 는 선만으로 이루어진 빈 도형이고, fill 은 정해진 스타일(색깔) 로 도형을 색칠해준다.ctx.fillStyle 은 붓의 색깔을 정의한다. 지정해주지 않으면 검은색이 Default 이다.자바스크립트는 위에서 아래로 코드를 읽기 때문에 , 순서또한 중요하다.
1
2
| ctx.fill();
ctx.fillStyle = "red";
|
위 코드의 경우, 기존색깔(검은색)으로 가득 채운 후 , style 을 red로 바꿔주는 코드다. 빨간색으로 칠하기를 원하는 경우 순서를 바꿔주어야 한다.
같은 경로에 존재하는 선들
1
2
3
4
5
6
7
| ctx.rect(40, 40, 100, 100);
ctx.rect(50, 50, 100, 100);
ctx.rect(60, 60, 100, 100);
ctx.rect(70, 70, 100, 100);
ctx.fillstyle = "red";
ctx.fill();
|
- 위 코드에서 4개의 rect 는 같은 경로에 존재하는 선들이다. 따라서 밑에
fill()함수에 의해 모두 빨간색으로 칠해지게 된다.
나누려면 어떻게 해야할까?
ctx.beginPath()함수를 사용하면, 이후에 작성하는 선들은 모두 다른경로에 있다. 따라서 다른 스타일을 적용할 수 도 있다.
ctx.fillstyle 은 붓의 색깔을 정한다. 따라서 경로가 바뀌더라도, 붓의 색깔은 변하지 않기 때문에, 다른색깔을 원한다면 다시 지정해 주어야 한다.
참고
mdn 공식문서
