본문 바로가기

제가 쓴 책175

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.
4. 직선(Line) 그리기 4. 직선(Line) 그리기 직선을 그리기 위해서는 먼저 현재의 위치로부터 특정 좌표까지 직선을 그리거나 아니면 context의 moveTo(x1, y1) 메서드를 이용하여 x1, y1 지점으로 이동한 후 lineTo(x2, y2) 메서드를 이용하여 시작 지점(x1, y1)으로부터 x2, y2까지 직선을 그릴 2개의 좌표 경로를 정의합니다. 다음으로 직선을 실제로 그리기 위해서 stroke() 메서드를 사용해주면 됩니다. 이제 basic.html 파일을 메모장을 이용하여 연 후 “// canvas 그릴 선이나 도형 작성 “ 아래에 다음과 같이 코드를 작성해봅니다. // canvas에 그릴 선이나 도형 작성 context.moveTo(0, 30); context.lineTo(100, 30); context.. 2013. 8. 7.
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.

티스토리툴바