본문 바로가기

체르니 놀이터 보기603

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.
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.

티스토리툴바