본문 바로가기

체르니 놀이터 보기603

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.
8.3 getElementById(), getElementsByTagName() 메서드를 이용한 접근 8.3 getElementById(), getElementsByTagName() 메서드를 이용한 접근 지금까지는 HTML DOM에서 “A를 부모 노드로 하는 자식 노드(들)은 어떤 것들이 있는가?”와 같이 조금은 불편하고 복잡한 방법으로 노드에 접근을 했습니다. 하지만 DOM에는 이보다 발전된 형태의 getElementById(), getElementsByTagName() 메서드 2개를 제공하여 원하는 노드에 직접 접근이 가능하도록 지원합니다. 첫 번째 메서드인 getElementById() 메서드는 id 속성을 이용하여 해당 속성을 가진 노드에 접근하는데 사용할 수 있는 메서드이고 두 번째 메서드인 getElementsByTagName() 메서드는 요소(Element) 이름을 이용하여 노드에 접근할 수.. 2013. 8. 6.

티스토리툴바