본문 바로가기

제가 쓴 책175

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.
9. 캔버스(canvas) 내용을 이미지로 저장 9. 캔버스(canvas) 내용을 이미지로 저장 여러분들이 canvas 내에 그린 직선이나 사각형 같은 이미지들을 이미지 형태(기본 png 형태)로 저장하는 방법은 의외로 간단합니다. 다음과 같은 toDataURL() 메서드를 이용하여 이미지 객체를 이미지 데이터 URL로 설정할 수 있으며 브라우저를 통해 직접 이미지 데이터 URL을 열거나 이미지를 저장할 수 있습니다. canvas.toDataURL([type]) 위에서 입력 파라미터가 없이 사용할 경우 기본 타입은 “image/png”를 의미하게 됩니다. 입력 파라미터의 타입(type)으로 올 수 있는 형태는 “image/jpeg”, “imag/svg+xml”, “text/plain” 등이 올 수 있습니다. toDataURL() 메서드가 실행되면 반환.. 2013. 8. 7.
8. context의 상태 저장 및 불러오기 8. context의 상태 저장 및 불러오기 context는 하나의 스택(stack)에 그림 상태들을 보유합니다. 그림 상태들은 변환(Transformation), clip() 메서드를 이용한 clipping region, strokeStyle, fillStyle 등과 같은 속성들로 구성됩니다. 그리고 이러한 그림상태들을 context는 다음과 같이 2 가지의 메서드를 사용하여 스택에 저장하거나 복원할 수 있습니다. 메서드 기능 save() 현재의 상태를 스택(stack)에 집어넣습니다. restore() Context 상태를 복원하기 위해서 스택으로부터 상태를 끄집어냅니다. 이제 “basic.html” 파일을 메모장으로 연 후 “// canvas에 그릴 선이나 도형 작성” 밑에 다음과 같이 코드를 작성.. 2013. 8. 7.
7. 그림자 효과(Shadow Effect)와 색상의 점진적 변화주기(Gradient) 7. 그림자 효과(Shadow Effect)와 색상의 점진적 변화주기(Gradient) canvas 내에 그려지는 선, 도형, 텍스트 등은 우리가 파워포인트, 포토샵 등에서 사용하는 그림자 효과(Shadow Effect)를 줄 수 있습니다. 또한 Gadient 관련한 메서드들을 이용하여 선형, 혹은 원형태로 색상이 점진적으로 변하는 처리를 선, 도형, 텍스트 등에 효과를 줄 수 있습니다. 7.1 그림자 효과(Shadow Effect) 그림자 효과를 주는 방법은 “http://www.w3.org/TR/2dcontext/#shadows”에 나타난 것처럼 다음과 같이 4 가지 속성을 이용하여 적용시킬 수 있습니다. context.shadowColor context.shadowOffsetX context.sha.. 2013. 8. 7.

티스토리툴바