본문 바로가기

html571

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

티스토리툴바