본문 바로가기

Canvas16

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.
6. Text 6. Text 이제 캔버스(canvas)에서 텍스트(Text)를 사용하는 방법에 대해 알아봅니다. Text와 관련된 context의 메서드들을 나타내면 다음과 같습니다. 메서드 기능 fillText(text, x, y [, maxWidth]) 기본 검은색으로 입력 파라미터인 (x, y) 좌표점에 텍스트를 채워 그립니다. 옵션으로 maxWidth 값을 설정하면 텍스트의 최대 너비를 설정 strokeText(text, x, y [, maxWidth]) 기본 검은색으로 입력 파라미터인 (x, y) 좌표점에 텍스트를 채우지 않고 그립니다. 옵션으로 maxWidth 값을 설정하면 텍스트의 최대 너비를 설정 measureText(text) text의 너비를 포함하는 객체를 반환 “basic.html” 파일을 메모장.. 2013. 8. 7.
5.4 bezierCurveTo() 메서드를 이용한 3차 곡선 그리기 5.4 bezierCurveTo() 메서드를 이용한 3차 곡선 그리기 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 메서드는 quadraticCurveTo(cpx, cpy, x, y) 메서드보다 한 개의 조절점이 많은 2개의 조절점을 이용하여 3차 곡선을 그리는데 사용합니다. 이제 “basic.html” 파일을 메모장을 이용하여 연 후 “// canvas 그릴 선이나 도형 작성 “ 아래에 다음과 같이 코드를 작성해봅니다. // canvas에 그릴 선이나 도형 작성 context.beginPath(); context.moveTo(50, 100); context.bezierCurveTo(100, 50, 150, 150, 200, 100); context.lineWidth = .. 2013. 8. 7.

티스토리툴바