본문 바로가기

Rect2

3. 경로(Path) 3. 경로(Path) 하나의 경로(Path)는 0 또는 하나 이상의 하부 경로들의 리스트입니다. 이러한 하부 경로는 직선, 곡선에 의해 연결되는 하나 또는 둘 이상의 점들의 리스트로 구성됩니다. 이러한 경로는 처음 시작점과 마침점이 같으면 닫힌 경로로 처음 시작점과 마침점이 다르면 열린 경로로 구분합니다. 그러면 경로와 관련된 메서드들에 대해서 알아볼까요? 메서드 기능 beginPath() 현재의 경로를 재설정. 즉 경로의 시작 moveTo() moveTo(x, y) 메서드의 입력 파라미터로 설정된 (x, y) 좌표로 이동 closePath() 현재의 경로가 닫혔음을 마킹하고 새로운 경로를 시작 lineTo() 현재의 하부 경로에서 lineTo(x, y) 메서드의 입력 파라미터로 설정된 (x, y) 좌표.. 2013. 8. 7.
7.7 svg 요소(Element) 7.7 svg 요소(Element) svg는 Scalable Vector Graphics(SVG)의 약자로 XML 내에서 2차원 그래픽을 구현하는데 사용되는 언어입니다. SVG에서는 직원과 곡선 등을 표현하는데 사용되는 벡터(Vector) 그래픽과 이미지, 마지막으로 텍스트 3가지 타입의 그래픽 객체를 지원하는데 여기서는 간단하게 원, 직사각형, 이미지, 텍스트를 나타내는 예제를 알아봅니다. 첫 번째 예제는 원(circle), 직사각형(rectangle), 텍스트를 나타내는 간단한 예제입니다. 메모장을 열어서 HTML5 문서의 기본 태그들을 작성한 후 body 요소의 시작과 마침 태그 내에 다음과 같이 코드를 작성합니다. text 요소를 이용해서 나타낸 부분 text 요소를 이용해서 나타낸 부분 위에서 .. 2013. 7. 31.