Canvas tutorial #2 (Lines)

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.1.에 작성된 글입니다.

※ 이 글은 해당사이트를 번역한 것입니다.

---

Line

선을 그리기 위해선 beginPath( )나 moveto( ), linto( ), stroke( )와 같은 방법을 사용할 수 있다.

 

먼저 beginPath( )를 사용하여 새로운 경로를 그릴 것 임을 선언 할 수 있다.

다음으로 moveto( )를 사용하여 context point를 위치 시키고,

lineto( )를 사용하여 시작 위치에서 새 위치로 직선을 그릴 수 있다.

마지막으로 stroke( )를 사용해 선을 보이게 할 수 있다. 특별한 명시가 없는 경우엔 default 값은 검은색이다.

( ex. context.strokeStyle = "red"; )

context.beginPath( ); // 새로운 경로를 그릴 것 임을 선언함. 
context.moveto(x, y); // (x,y) 좌표를 시작점으로 할 것임. 
context.lineto(x, y); // (x, y) 좌표를 연결점으로 할 것임. 
context.stroke( ); // 선을 보이게(가시화) 함.

---

Line Width

선의 두께를 정의 하기 위해서는 Canvas context의 lineWidth( ) 속성을 사용할 수 있다.

(rem, em 같은 값들은 사용할 수 없다.)

lineWidth( )속성은 반드시 stroke( ) 속성을 선언하기 전에 선언해 주어야 한다.

context.lineWidth = value; // value만큼의 두께를 부여함.

---

Line Color

선의 색상을 정의 하기 위해서는 Canvas context의 strokeStyle( ) 속성을 사용할 수 있다.

(문자값, RGB, HEX 값 등을 사용할 수 있다.)

strokeStyle( )속성은 반드시 stroke( ) 속성을 선언하기 전에 선언해 주어야 한다.

context.strokeStyle = "color"; // color색을 부여함.

---

Line Cap

선의 색상을 정의 하기 위해서는 Canvas context의 lineCap( ) 속성을 사용할 수 있다.

선은 butt, round, square 3개의 스타일 중 1개만 가질 수 있습니다.

특별한 명시가 없는 경우엔 butt값으로 default값을 가진다.

lineCap( )속성은 반드시 stroke( ) 속성을 선언하기 전에 선언해 주어야 한다.

context.strokeStyle = "value"; // value(butt, round, square)를 linecap값으로 부여함.