자바스크립트 - movedTo, LineTo

ctx.moveTo()

ctx.moveTo()는 시작점의 x 축과 y 축을 변경 합니다. ctx.moveTo(50,50) 이라면 x축과 y축의 시작점을 50,50 변경합니다.

ctx.lineTo()

ctx.lineTo() 는 말그대로 라인을 그려줍니다. (x,y) 을 설정하여 라인을 그립니다. ctx.lineTo(150,50) 는 시작점에서 x축 150 y축 50 만큼 내려서 라인을 만듭니다.

ctx.arc()

ctx.arc()는 원도형을 만드는 함수 입니다. ctx.fill 처럼 (x축,y축,크기, 원의 시작점, 원의 끝점) 을 입력합니다.

ctx.arc(250,100, 50, 0, 2 * Math.PI);

위를 설정하자면 x축 250, y축 50에 지름 50 시작점 0 에서 끝점 2 * Math.PI를 말합니다.

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

canvas.width = 800;
canvas.height = 800;

ctx.fillRect(200,200,50,200);
ctx.fillRect(400,200,50,200);
ctx.fillRect(300,300,50,100);
ctx.fillRect(200,200,200,30);

ctx.moveTo(200,200);
ctx.lineTo(325,100);
ctx.lineTo(450,200);
ctx.fill();

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

canvas.width = 800;
canvas.height = 800;

ctx.fillRect(210 - 40, 200 - 30,15,100);
ctx.fillRect(350 - 40, 200 - 30,15,100);
ctx.fillRect(260 - 40, 200 - 30,60,100);

ctx.arc(250,100, 50, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(260+10,80, 10, Math.PI , 2 * Math.PI);
ctx.arc(220+10,80, 10, Math.PI , 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(240+10,120, 10, 0 , 1 * Math.PI);
ctx.fill();