본문 바로가기

Canvas16

5.3 quadraticCurveTo() 메서드를 이용한 2차 곡선 그리기 5.3 quadraticCurveTo() 메서드를 이용한 2차 곡선 그리기 quadraticCurveTo(cpx, cpy, x, y) 메서드는 2차 곡선을 그리는데 사용하는 메서드로 각각의 입력 파라미터에 대해서 보면 (cpx, cpy)는 조절점 역할을 하고 (x, y)는 끝 점을 나타냅니다. 위와 같이 조절점(cpx, cpy)를 기준으로 끝점이 (x, y)인 2차원 곡선 형태의 베지어 곡선(Bezier Curve)를 그리게 됩니다. 2차원 곡선 형태의 베지어 곡선에 대한 계산식이 궁금한 분들은 위키파디아(“http://en.wikipedia.org/”)에서 Bézier curve로 검색해보면 나오는데 수학적으로 복잡한 부분이므로 이 책에서는 설명을 생략합니다. 이제 “basic.html” 파일을 메모장.. 2013. 8. 7.
5.2 arcTo() 메서드를 이용한 둥근 모서리 그리기 5.2 arcTo() 메서드를 이용한 둥근 모서리 그리기 두 번째 arcTo(x1, y1, x2, y2, radius) 메서드는 보통 모서리가 둥근 형태를 그리고자 할 때 사용하는 메서드로 생각보다 복잡합니다. 입력 파라미터로 사용되는 x1, y1은 호의 시작을 나타내는 x, y좌표이고 x2, y2는 호의 끝을 나타내는 x, y 좌표입니다. 마지막으로 radius는 호의 반경을 의미합니다. arcTo() 메서드를 이용하여 모서리가 둥근 형태를 만들기 위해서는 arcTo() 메서드의 입력 파라미터로 사용되는 2개의 좌표인 (x1, y1), (x2, y2)를 기준으로 2개의 가상선을 적용하여 모서리를 둥글게 그릴 수 있습니다. 이해를 돕기 위해서 가장 쉬운 형태인 다음과 같은 직각으로 만나는 형태로 그림을 .. 2013. 8. 7.
5. 호(arc), 원(circle) 그리고 곡선 그리기 5. 호(arc), 원(circle) 그리고 곡선 그리기 context에는 원호(arc), 곡선과 관련하여 다음과 같은 4 가지 형태의 메서드를 제공합니다. arc(x, y, radius, startAngle, endAngle [, anticlockwise]) arcTo(x1, y1, x2, y2, radius) quadraticCurveTo(cpx, cpy, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 5.1 arc() 메서드를 이용한 호(arc), 원(circle) 그리기 첫 번째 arc() 메서드는 호 혹은 원을 그릴 수 있는 메서드로 x, y는 원의 중심좌표를 radius는 반경을 나타내고 startAngle은 시작 각도를 나타내고 endAngle은 끝.. 2013. 8. 7.
4. 직선(Line) 그리기 4. 직선(Line) 그리기 직선을 그리기 위해서는 먼저 현재의 위치로부터 특정 좌표까지 직선을 그리거나 아니면 context의 moveTo(x1, y1) 메서드를 이용하여 x1, y1 지점으로 이동한 후 lineTo(x2, y2) 메서드를 이용하여 시작 지점(x1, y1)으로부터 x2, y2까지 직선을 그릴 2개의 좌표 경로를 정의합니다. 다음으로 직선을 실제로 그리기 위해서 stroke() 메서드를 사용해주면 됩니다. 이제 basic.html 파일을 메모장을 이용하여 연 후 “// canvas 그릴 선이나 도형 작성 “ 아래에 다음과 같이 코드를 작성해봅니다. // canvas에 그릴 선이나 도형 작성 context.moveTo(0, 30); context.lineTo(100, 30); context.. 2013. 8. 7.