canvas API
- html element 중에 canvas 라는 API가 있는데, 이는 그림을 그릴 수 있게 해주는 API다. 파이썬에서 터틀을 그리는 거랑 비슷하게 생긴 것 같다.
- 1 HTML
- html에 canvas 태그를 넣어주고, app.js 을 심어주었다.
<body>
<canvas></canvas>
</body>
<script src="./app.js"><script>
- 2 JavaScript
- javascript에서 canvas 태그를 변수로 잡아주고, getContext를 통해 2d화 시켰다. 3D도 가능하다.
// canvas 를 변수화
const canvas = document.querySelector("canvas");
// getContext는 붓과 같은 API, 안에 2d로 적어주었다.
const ctx = canvas.getContext("2d");
-3 CSS
- 그림이 그려질 canvas의 넓이와 높이를 설정해준다. 그리고 border를 설정했다.
canvas{
width: 700px;
height: 700px;
border: 5px solid black;
}
-4 JavaScript
이후에, JavaScript에도 이 캔버스의 크기를 설정해주어야한다.
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 700;
canvas.height = 700;
설정하고 나면, 위와같이 html에 canvas가 그려지고, 화살표가 가르키는 방향 왼쪽위가 좌표를 뜻한다고 생각하면된다. 저 위치가 x=0, y=0의 값이다.
그 다음, ctx불러오고 ctx.API(x, y, width, height) 의 순으로 x좌표, y좌표를 적고, 넓이, 높이를 그리면 사각형이 그려진다.
// 채워진 사각형
ctx.fillRect(10, 10, 100, 100);
// 선 그리기
ctx.rect(110, 110, 100, 100);
// 선 색깔 채우기
ctx.stroke();
