※ 이 글은 예전 블로그에서 퍼온 글입니다. 사각형(rectangle) 태그로 표현하며 x, y, width, height, fill, stoke, stroke-width 속성을 주로 사용함. ​ 원(circle) 태그로 표현하며 cx, cy, r, stoke, stroke-width 속성을 주로 사용함. ​ 타원(ellipse) 태그로 표현하며 cx, cy, r, stoke, stroke-width 속성을 주로 사용함. ​ 선(line) 태그로 표현하며 시작점(x1, y1)과 끝점(x2, y2), stoke, stroke-width 속성을 주로 사용함. ​ 타원(ellipse) 태그로 표현하며 cx, cy, r, stoke, stroke-width 속성을 주로 사용함. ​ 폴리 라인(polyline) ..

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.2.에 작성된 글입니다. ※ 이 글은 해당사이트를 번역한 것입니다. Path(경로) 여러 하위 경로를 연결하여 경로를 생성할 수 있다. 각각의 새 하위 경로의 ending point는 새로운 context point가 된다. 각각의 하위 경로를 구성하는 방법으로 lineTo( )와 arcTo( ), quadraticCurveTo( ), bezierCurveTo( )가 있다. 또한 새로운 경로를 그릴때 마다 beginPath( )를 이용할 수 있다. context.beginPath(); context.moveTo(x, y); // line 1 context.lineTo(x, y); // quadratic curve context.quadraticCurveT..

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.1.에 작성된 글입니다. ※ 이 글은 해당사이트를 번역한 것입니다. Line 선을 그리기 위해선 beginPath( )나 moveto( ), linto( ), stroke( )와 같은 방법을 사용할 수 있다. 먼저 beginPath( )를 사용하여 새로운 경로를 그릴 것 임을 선언 할 수 있다. 다음으로 moveto( )를 사용하여 context point를 위치 시키고, lineto( )를 사용하여 시작 위치에서 새 위치로 직선을 그릴 수 있다. 마지막으로 stroke( )를 사용해 선을 보이게 할 수 있다. 특별한 명시가 없는 경우엔 default 값은 검은색이다. ( ex. context.strokeStyle = "red"; ) context.beg..