[HTML5] context.arc()

 

 

 

 

context.arc()

 

context.arc(x,y,radius, startAngle, endAngle, anticlockwise);

 

x,y는 원의 중심점을 의미

radius는 원호가 그려질 원의 반지름

startAngle, endAngle은 일반 각도가 아니라 radian이다.

anticlockwise는 원호의 방향을 true나 false로 지정한다.

 

 

 

ex)

 

 

 

 

이런 원을 그린다고 가정할때 사용 방법은 아래와 같다.

 

 

 

function drawScreen() {
            context.beginPath();
            context.strokeStyle = "black";
            context.lineWidth = 5;
            context.arc(100, 100, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

 

            //원그리기
            context.stroke();
            context.closePath();

 

            context.beginPath();
            context.strokeStyle = "red";
            context.lineWidth = 5;
            context.arc(100, 100, 80, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

 

            //원그리기
            context.stroke();
            context.closePath();

        }

 

 

실습예제와 js는 첨부파일로 첨부함.

 

 

 

test1.html

modernizr.custom.56364.js