SVG 도형 그리기
·
Programming/SVG
※ 이 글은 예전 블로그에서 퍼온 글입니다. 사각형(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) ..
Canvas tutorial #5 (Shapes)
·
Programming/Canvas
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.4.에 작성된 글입니다. ※ 이 글은 해당사이트를 번역한 것입니다. Custom Shape closePath( )를 사용하여 custom shape를 만들수 있다. Custom shape를 만들기 위한 각각의 하위경로를 만들기 위해 lineTo( )나 arcTo( ), quadraticCurveTo( ), bezierCurveTo( )를 사용할 수 있다. ex) 구름모양 코드 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // begin custom shape context.beginPath(); context.moveTo(170, 80); c..