Skip to main content

shapes elements

기본 도형 (basic shapes)#

<rect>#

  • 사각형 그리기 rect
  • 6가지 기본 속성
    • x: 왼쪽 위 x 위치
    • y: 왼쪽 위 y 위치
    • rx: 둥근모서리 x 반경
    • ry: 둥근모서리 y 반경
    • width: 너비
    • height: 높이
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

<circle>#

  • 원 그리기 요소 circle
  • 3가지 기본 속성
    • r: 반경
    • cx: 원 중심의 x 위치
    • cy: 원 중심의 y 위치
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

<ellipse>#

  • 타원 그리기 ellipse
  • 4가지 기본 속성
    • rx: 타원의 x 반경
    • ry: 타원의 y 반경
    • cx: 타원 중심의 x 위치
    • cy: 타원 중심의 y 위치
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

<line>#

  • 선 그리기 line
  • 4가지 기본 속성
    • x1: 점 1의 x 위치
    • y1: 점 1의 y 위치
    • x2: 점 2의 x 위치
    • y2: 점 2의 y 위치
    • stroke: 선 색상, 지정하지 않으면 보이지 않을수 있음.
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

<polyline>#

  • 연결된 직선 그룹 polyline
  • 1가지 기본 속성
    • points: 연결할 점들의 목록을 공백, 쉼포, 줄바꿈 문자로 구분좌표는 x, y 좌표 두 개씩 있어야 함.
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

<polygon>#

  • 연결된 직선 그룹 polyline
  • 1가지 기본 속성
    • points: 연결할 점들의 목록을 공백, 쉼포, 줄바꿈 문자로 구분좌표는 x, y 좌표 두 개씩 있어야 함.
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

<path>#

  • 다양한 도형을 그릴수 있는 경로 path
  • 1가지 기본 속성
    • d: 연결할 점들의 목록을 공백, 쉼포, 줄바꿈 문자로 구분좌표는 x, y 좌표 두 개씩 있어야 함.
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^