윤일무이
[노마드코더 바닐라JS로 그림 앱 만들기] #1 Canvas API 본문
📌 Canvas를 만들어보자
-CSS, JS에서 모두 캔버스의 크기를 동일하게 지정해주어야 한다.
CSS에서의 크기는 유저가 볼 수 있는 UI의 사이즈를 설정한 것이고, JS에서의 크기는 캔버스의 해상도이기 때문이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meme Maker</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="app.js"></script>
</body>
</html>canvas {
width: 800px;
height: 800px;
border: 1px solid black;
}
body {
display: flex;
justify-content: center;
align-items: center;
}const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;
ctx.fillRect(50, 50, 100, 200);
1. context란 컨버스에서의 붓과 같은 기능을 한다. 좌표는 왼쪽 상단의 0, 0부터 시작한다.
2. ctx.fillRect(x, y, width, heigth)는 사각형을 채운다는 뜻으로 어디서에 그릴 건지 / 얼마나 큰걸 그릴 건지를 정해줘야 한다.
-ctx.rect의 경우는 어떨까? 이 경우는 그냥 사각형의 선을 임의로 그리기만 했을 뿐 아무 것도 하지 않았다. 따라서 ctx.stroke / ctx.fill 로 보여질 수 있게끔 선이나 색을 지정해주는 함수를 사용해야 한다.
3. ctx.fillStyle = "color"로 색을 지정할 수 있다.
-path의 개념과 비슷하다고 보면 되는데, 선 a를 빨간색으로 긋고 선 b는 파란색으로 긋고 싶을 때, 이 때는 path를 다시 시작한다는 뜻으로 ctx.beginPath()를 선언해주어야 한다. 그래야 빨간 path가 끝나고 새로운 파란 path를 쓸 수 있다.
4. 아까 말한 것처럼 ctx.fillRect = ctx.rect + ctx.fill의 형태인데, 사실 이 ctx.rect도 축약된 형태다. (ctx.moveTo + ctx.lineTo)
-선을 긋지 않고 단순히 연필을 이동한 ctx.moveTo(x, y)와 라인이 끝난 지점에서 선을 긋는 ctx.lineTo(x, y)가 합쳐진 형태다.
-즉 어디에 그릴지 이동한 후 선을 그어 사각형을 만든 것이 ctx.rect인 셈이다.
ctx.moveTo(50, 50); //0, 0에서 50, 50으로 옮김
ctx.lineTo(150, 50) //x선 : 50에서 150까지 y선: 50 그대로
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.lineTo(50, 50);
ctx.fill(); //선을 다 그린 후 채워넣기
좌표 계산만 잘 하면 삼각형도 그릴 수 있다.
약간 무섭지만 사람도 그릴 수 있다. 원과 반원은 ctx.arc로 그릴 수 있다.
CanvasRenderingContext2D.arc() - Web APIs | MDN
The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds a circular arc to the current sub-path.
developer.mozilla.org
ctx.arc(원의 중심이 되는 x, 동일한 y, 반지름 r, 시작각도, 끝 각도, 방향 설정)
-시작 각도와 끝 각도는 모두 3시를 기준으로 시계 방향으로 설정할 수 있으며 원주율(Math.PI)로 지정된다.
-그래서 반원의 경우 Math.PI 를 하면 반원이, 원의 경우 여기에 2를 곱해주면 동그란 모양이 나온다.
반원 두 개와 삼각형으로 하트도 그려봤는데 이렇게 도형으로 그리기에는 적합하지 않은 것 같다.
'👋🏻 JavaScript > 💭 노마드코더 바닐라JS' 카테고리의 다른 글
| [노마드코더 바닐라JS로 그림 앱 만들기] #2 Painting Board (1) (0) | 2023.03.21 |
|---|---|
| [노마드코더 바닐라JS로 크롬 앱 만들기] #8.0 ~ #8.2 (0) | 2023.03.10 |
| [노마드코더 바닐라JS로 크롬 앱 만들기] #7.0 ~ #7.8 (0) | 2023.03.08 |
| [노마드코더 바닐라JS로 크롬 앱 만들기] #6.0 ~ #6.3 (0) | 2023.03.08 |
| [노마드코더 바닐라JS로 크롬 앱 만들기] #5.0 ~ #5.3 (0) | 2023.03.08 |
