[노마드코더] 바닐라 JS로 그림 만들기 - drawing project(2)

https://nomadcoders.co/javascript-for-beginners-2

바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders

사람 만들기

1. 상체

- 팔 -> (200, 200) 위치와 (400,200) 위치에서 가로 15 세로 100인 직사각형

- 몸 -> (275, 200) 위치에서 가로 60 세로 200인 직사각형

2. 머리

- (305, 130) 위치에서 반지름이 50인 원

- 채우기

3. 경로 끊고 새 경로 시작

4. 눈

- 색상 흰색으로 변경

- (285, 120) 위치에서 반지름이 7인 반원

- (325, 120) 위치에서 반지름인 7인 반원

- 채우기

 

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 600;

//body
ctx.fillRect(200, 200, 15, 100);
ctx.fillRect(400, 200, 15, 100);
ctx.fillRect(275, 200, 60, 200);

//head
ctx.arc(305, 130, 50, 0, 2 * Math.PI); // (x, y, radius, starting angle, ending angle)
ctx.fill();

//eye
ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(285, 120, 7, Math.PI, 2 * Math.PI);
ctx.arc(325, 120, 7, Math.PI, 2 * Math.PI);
ctx.fill();

 

Math.PI

- 원의 둘레와 지름의 비율

- ≈ 3.14159