canvas js로 구현하기 (1) - 선 그리기

 

2D Context

 

canvas는 context를 갖고 있는 html 요소로, context는 canvas 안에서 픽셀을 다루는 것입니다.

context를 사용하기 위해서는 canvas는 getContext() 메서드가 필요하고, 이 메서드를 통해 canvas에 그림을 그릴 수 있습니다.

2d 그래픽의 경우 "2d"를 넣어줍니다.

 

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

 

 

 

 

canvas 크기 설정

 

canvas 크기 설정은 css에서 지정한 것과 별도로 다시 지정해줘야 합니다.

 

canvas.width = 700;
canvas.height = 700; 

 

 

 

선 그리기 방법

 

ctx.beginPath(); // 경로 생성 - 새로운 선 그리기
 
ctx.moveTo(x, y); // 선 시작 좌표 - 선 출발점
 
ctx.lineTo(x, y); // 선 끝 좌표 - 선 도착점 
 
ctx.stroke(); // 선 그리기

 

* 여러 개의 선을 그릴 때는 매번 beginPath() 호출해야 하고, beginPath()를 호출하지 않으면, 도착점들을 계속 잇는 선이 그려집니다.

 

 

 

 

사각형 그리기

 

ctx.strokeRect(x, y, width, height); // 사각형 윤곽선 그리기
 
ctx.fillRect(x, y, width, height); // 색칠된 사각형 

  

 

 

 

색 채우기

 

ctx.fill(); // 내부에 색 채우기
 
ctx.flilStyle // 내부 

 

 

 

 

선 디자인 설정

 

ctx.strokestyle // 선의 색상 
 
ctx.lineWidth // 선의 두께 설정
 
ctx.lineCap // 선의 끝부분 설정(butt: 좌표에서 끝남/ square: 선의 두께만큼 길이를 늘려서 끝남/ round: 선의 끝이 둥글게 끝남)
 
ctx.lineJoin // 선의 꺾인 부분 설정(mitter: 각진 모서리/ round: 둥근 모서리/ bevel: 끝이 잘린 모서리)