javascript canvas에 arc로 원을 그려봅시다.

자바스크립트로 화면에 원을 그리고 싶다면 어떻게 해야할까?

일단 canvas에는 직사각형, 라인등을 그릴 수 있는 방법을 터득했다면 이젠 좀 더 난이도가 있는 서클, 원에 도전해 본다.

예제 하나면 충분하다고 생각한다.

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();
        }
      }
    }
  }
}

일반적으로 자바스크립트는 canvas라는 div를 html이나 php에서 만든 후 자바스크립트를 호출해서 선을 그리는 방식으로 진행한다.

 

라인을 그리고, 원을 그리고, 직사각형을 그리다 보면 어느새 작품이 나오지 않을까 싶다.

모두들 화이팅하자구요~