개발자입니다
노마드코더 JS로 그림앱 만들기) #1 THE CANVAS API - canvas, fillRect, moveTo, lineTo, fill, stroke, fillStyle, beginPath 본문
Javascript/노마드코더 - JS로 그림앱 만들기
노마드코더 JS로 그림앱 만들기) #1 THE CANVAS API - canvas, fillRect, moveTo, lineTo, fill, stroke, fillStyle, beginPath
끈기JK 2022. 10. 6. 08:41<canvas> 태그 : js로 그래픽 그릴수 있게 하는 API
<!-- index.html -->
<!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>/* style.css */
canvas {
width: 800px;
height: 800px;
border: 5px solid black;
}
body {
display: flex;
justify-content: center;
align-items: center;
}// app.js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d"); // 2d 그림 그리기 위해
canvas.width = 800;
canvas.height = 800;
// 기본 세팅
fillRect(x 시작위치, y 시작위치, 너비, 높이)
ctx.fillRect(50, 50, 100, 200);
rect() 이후 도형을 나타나게 하는 방법은 2가지가 있다.
fill() : 색을 가득 채운 도형이 나타난다.
stroke() : 테두리만 나타난다.
// app.js
ctx.rect(50, 50, 100, 100);
ctx.fill();
fillStyle 적용 후 fill() 했을 때 모든 도형 색깔이 바뀐다. 이유는 같은 경로로 이루어져 있기 때문이다.
ctx.rect(50, 50, 100, 100);
ctx.rect(150, 150, 100, 100);
ctx.rect(250, 250, 100, 100);
ctx.fill();
ctx.rect(350, 350, 100, 100);
ctx.fillStyle = "red";
ctx.fill();
beginPath() : 경로를 새로 지정해서 위 도형들과 경로를 분리시킨다.
ctx.rect(50, 50, 100, 100);
ctx.rect(150, 150, 100, 100);
ctx.rect(250, 250, 100, 100);
ctx.fill();
ctx.beginPath();
ctx.rect(350, 350, 100, 100);
ctx.fillStyle = "red";
ctx.fill();
rect()도 단축형이다. 아래와 같은 방법으로 사각형 그린다.
moveTo(x, y) : x, y 좌표 지점까지 브러쉬를 움직인다.
lineTo(x, y) : x, y 좌표 지점까지 선을 그리며 움직인다.
여기서 stroke()은 테두리만, fill()은 도형을 채운다.
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.lineTo(50, 50);
ctx.stroke();
-집 그리기
ctx.fillRect(200, 200, 50, 200);
ctx.fillRect(400, 200, 50, 200);
ctx.lineWidth = 2; // 실행 순서때문에 아래 문장보다 위에 위치한다.
ctx.fillRect(300, 300, 50, 100);
ctx.fillRect(200, 200, 200, 20);
ctx.moveTo(200, 200);
ctx.lineTo(325, 100);
ctx.lineTo(450, 200);
ctx.fill();
-사람 그리기
arc(x, y, 반지름, 원 시작지점, 원 끝지점)
아래 그림의 0 부터 시작이다. 원 시작지점 및 끝지점에 몇 PI를 입력하느냐에 따라 원의 모양이 바뀐다.
참고사이트 : https://www.w3schools.com/tags/canvas_arc.asp
ctx.fillRect(210 - 40, 200 - 30, 15, 100);
ctx.fillRect(350 - 40, 200 - 30, 15, 100);
ctx.fillRect(260 - 40, 200 - 30, 60, 200);
ctx.arc(250, 100, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(260 + 10, 80, 8, 1 * Math.PI, 2 * Math.PI);
ctx.arc(220 + 10, 80, 8, 1 * Math.PI, 2 * Math.PI);
ctx.fill();
'Javascript > 노마드코더 - JS로 그림앱 만들기' 카테고리의 다른 글
'Javascript/노마드코더 - JS로 그림앱 만들기' Related Articles
more
