본문 바로가기

캔버스2

10. 변환(Transformation) 10. 변환(Transformation) 여러분은 캔버스(canvas)에 간단한 직선부터 사각형, 곡선 등과 같이 다양한 형태의 그리기 작업을 사용해보았습니다. 이번에는 이러한 그리기 작업에 조금 변화를 줄 수 있는 방법에 대해서 소개할 것인데 바로 변환(Transformation)입니다. 제공하는 메서드를 정리하면 다음과 같으며 순서대로 알아봅니다. context.scale(x, y) context.translate(x, y) context.rotate(angle) context.transform(a, b, c, d, e, f) context.setTransform(a, b, c, d, e, f) 10.1 scale(x, y) 메서드를 이용한 배율 조정 scale() 메서드는 입력 파라미터로 받는 x,.. 2013. 8. 7.
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.