본문 바로가기

Canvas16

3. 경로(Path) 3. 경로(Path) 하나의 경로(Path)는 0 또는 하나 이상의 하부 경로들의 리스트입니다. 이러한 하부 경로는 직선, 곡선에 의해 연결되는 하나 또는 둘 이상의 점들의 리스트로 구성됩니다. 이러한 경로는 처음 시작점과 마침점이 같으면 닫힌 경로로 처음 시작점과 마침점이 다르면 열린 경로로 구분합니다. 그러면 경로와 관련된 메서드들에 대해서 알아볼까요? 메서드 기능 beginPath() 현재의 경로를 재설정. 즉 경로의 시작 moveTo() moveTo(x, y) 메서드의 입력 파라미터로 설정된 (x, y) 좌표로 이동 closePath() 현재의 경로가 닫혔음을 마킹하고 새로운 경로를 시작 lineTo() 현재의 하부 경로에서 lineTo(x, y) 메서드의 입력 파라미터로 설정된 (x, y) 좌표.. 2013. 8. 7.
2. 사각형(Rectangle) 그리기 2. 사각형(Rectangle) 그리기 canvas에 사각형을 그리는 것과 관련하여 다음과 같이 3 가지 형태의 메서드들을 이용합니다. 메서드 기능 fillRect(x, y, w, h) 주어진 스타일로 사각형을 칠함 strokeRect(x, y, w, h) 주어진 스타일로 해당 사각형의 외부 라인을 칠함 clearRect(x, y, w, h) 해당 사각형을 투명한 검은색으로 칠함. 실제는 흰색으로 나타남 위에서 x, y, w, h는 방금 전 “colorandstyleEx.html” 예제에서 이해했을 것 같은데요. 각각 x, y는 앞에서 설명한 x, y 좌표를, w는 너비(width), h는 높이(height)를 나타냅니다. 이제 간단한 예제를 해볼까요? “basic.html” 파일을 메모장을 열어서 “/.. 2013. 8. 7.
1.3 색상(color)과 스타일(style) 1.3 색상(color)과 스타일(style) canvas에서 직선이나 도형 등의 색과 스타일을 설정하기 위해서는 context의 다음과 같은 2 가지 형태의 속성을 이용합니다. 속성 설명 fillStyle 직선이나 도형 등의 내부 색상이나 스타일을 설정 strokeStyle 직선이나 도형 등의 외부 색상이나 스타일을 설정 먼저 직선이나 도형 등의 내부 색상이나 스타일을 설정하는 fillStyle 속성을 보면 다음과 같은 형식을 사용합니다. context.fillStyle=color | gradient | pattern fillStyle 속성값으로 color인 경우 CSS 색상값을 설정해주면 되는데 색상 키워드나 #+16진수 형태, 그리고 RGB, RGBA, 등과 같은 색상값을 설정해주면 됩니다. 다음으.. 2013. 8. 7.
4장 Canvas 4장 Canvas HTML5 기반 웹페이지를 작성할 때 기존의 웹페이지에 등장하는 직선이나 이차원(2D), 3차원(3D) 도형, 챠트(Chart), 애니메이션, 게임 등을 어떻게 구현할 수 있을까를 한번쯤 생각해보게 됩니다. HTML5에서는 이러한 작업을 수행할 수 있도록 canvas 라는 요소를 새롭게 정의하여 사용할 수 있게 되었습니다. 현재 2차원 작업은 W3C에서 HTML Canvas 2D Context 라는 제목으로 표준화가 진행중으로 사이트는 “http://dev.w3.org/html5/2dcontext/”입니다. 3차원 작업은 Canvas 3D에서 비영리 컨소시엄인 크로노스 그룹(Khronos)이 진행하는 OpenGL 2.0에 기반한 WebGL 형태로 발전하여 현재 1.0 버전이 사용 가능합.. 2013. 8. 6.

티스토리툴바