고정 헤더 영역
상세 컨텐츠
본문
호(arc)
호나 원을 그리기 위해선 arc() 혹은 arcTo() 메소드를 사용
arc(x, y, radius, startAngle, endAngle, anticlockwise)
-> 원점은 (x, y)
-> 반지름은 radius
-> startAngle에서 시작하여 endAngle로 끝(각도는 radian 값을 사용)
-> 주어진 anticlockwise 방향으로 향하게 (true이면 반시계, false면 시계 방향)
-> 호를 그린다arcTo(x1, y1, x2, y2, radius)
-> 주어진 제어점들과 반지름으로 호를 그린다
-> 이전의 점과 직선으로 연결ex)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script type="application/javascript"> function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); for (var i = 0; i < 4; i++) { for (var j = 0; j < 3; j++) { ctx.beginPath(); var x = 25 + j * 50; // x coordinate var y = 25 + i * 50; // y coordinate var radius = 20; // Arc radius var startAngle = 0; // Starting point on circle var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); if (i > 1) { ctx.fill(); } else { ctx.stroke(); } } } } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="200"></canvas> </body> </html>
'Programming > Mindchain' 카테고리의 다른 글
| Google Assistant - Interactive Canvas (인터렉티브 캔버스) (0) | 2019.07.22 |
|---|---|
| canvas API - 색상 (0) | 2019.07.22 |
| canvas API - Path2D objects (0) | 2019.07.22 |
| canvas API - 도형 그리기(basic) (0) | 2019.07.22 |
| Intro (0) | 2019.07.22 |
댓글 영역