예제 11-4. 원호 그리기
WEB/JAVASCRIPT-CONCEPT 2017. 11. 3. 15:09 |* 원호 그리기
컨텍스트 객체의 arc() 메소드를 이용하면 원호를 그릴 수 있다.
arc(x, y, radius, starAngle, endAngle, anticlockwise)
x, y, radius // (x,y)는 원호의 중심, radius는 반지름.
starAngle // 원호의 시작 각도. 3시를 기점으로 시계방향으로 각도 계산
endAngle // 원호의 끝 각도. 3시를 기점으로 시계방향으로 각도 계산
anticlockwise // true이면 반시계방향, false이면 시계방향으로 원호 그리기. 생략가능하며 디폴트는 시계방향(false)
1.5 * Math.PI // 270˚ = 3∏/2
context.arc(50, 50, 10, 0, 1.5 * Math.PI, false);
// (50,50)을 중심으로 반지름이 10인 원호를 경로에 추가. 원호는 0~270˚(3∏/2점)까지 시계 방향
context.stroke();
예제 11-4. 원호 그리기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>원호 그리기</title></head> <body> <h3>원호 그리기</h3> <hr> <canvas id="myCanvas" style="background-color:aliceblue" width="200" height="150"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); // 빈 경로 구성 context.strokeStyle="magenta"; context.arc(100, 70, 30, 0, 1.5*Math.PI, false); // 시계 방향 context.stroke(); // 경로에 있는 원호를 그린다 context.beginPath(); // 이전 경로 지우고 빈 경로 구성 context.strokeStyle="blue"; context.arc(100, 70, 50, Math.PI/2, Math.PI, true); // 시계 방향 context.stroke(); // 경로에 있는 한 개의 원호를 캔버스에 그린다 </script> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 11-6. 선의 색과 굵기. 예제 11-7. 칠하기 (0) | 2017.11.03 |
|---|---|
| 예제 11-5. 사각형 그리기 (0) | 2017.11.03 |
| 예제 11-3. 선으로 삼각형 그리기 (0) | 2017.11.03 |
| 예제 11-2. 캔버스 그리기 맛보기 (0) | 2017.11.03 |
| 예제 11-1. <canvas> 태그로 캔버스 만들기 (0) | 2017.11.03 |