Canvas에서 아크라인(ARC LINE) 그리기

회사에서 망구성도를 그리다가 아크라인을 그릴 일이 생겼다.

여러가지 방법을 생각해보다가 2가지 방법정도로 간추려진 듯 하다.

일단 Canvas상에서 각도 개념은 아래 그림과 같이 우: 0, 아래: 90, 좌: 180, 위: 270으로 아래로 돈다.

function drawCanvas() {

  var canvas = document.getElementById("myCanvas");

  if(canvas.getContext) {

    var canvas_context = canvas.getContext("2d");

    

    var start_degrees = 0;

    var strat_angle = (Math.PI/180) * start_degrees;

    var end_degrees = 180;

    var end_angle = (Math.PI/180) * end_degrees;

   

    canvas_context.beginPath();

    canvas_context.arc(75, 75, 50, start_angle, end_angle, true);

   

    canvas_context.strokeStyle = "rgb(0, 222, 0)";

    canvas_context.stroke();

}

}

*arc메소드는 x, y, radius, start_angle, end_angle, anticlockwise의 파라미터 순서대로 입력해야한다.

anticlockwise는 반시계방향 여부를 true, false로 결정한다.

참조사이트: http://www.homeandlearn.co.uk/JS/html5_canvas_circles_and_arcs.html