CANVAS 3.3 원그리기

< CANVAS 3.3 원그리기 >

<canvas id="myCanvas" width="1140" height="1140">canvas</canvas>
    <script>
        var canvas = $("#myCanvas").get(0);
        var ctx = canvas.getContext("2d");

        // * 기본 원 그리기

        // context.arc(x,y,r sAngle, eAngle, counterclockwise);
        // x: x좌표 , y: y좌표 , r: 반지름, sAngle: 시작하는 각도 ,
        // eAngle: 끝나는 각도 , counterclockwise: 시계방향으로 회전

        ctx.arc(200,200,100,0,Math.PI*2);
        ctx.stroke();

        // * 선과 호를 연결하여 라운드 코너 그리기

        // context.arcTo(x1,y1,x2,y2,r);
        // x1: 시작하는 점의 x 좌표 , y1: 시작하는 점의 y 좌표,
        // x2: 끝나는 점의 x 좌표, y2: 끝나는 점의 y 좌표
        // r: 호의 반지름

        ctx.beginPath();
        ctx.moveTo(50,50);
        ctx.lineTo(300,50);
        ctx.arcTo(350,50,350,200,50);
        ctx.lineTo(350,200);
        ctx.stroke();

        // * quadraticCurve 그리기

        // context.quadraticCurveTo(cpx, cpy, x, y);
        // cpx: 조절하는 점의 x 좌표, cpy: 조절하는 점의 y 좌표
        // x: 끝나는 점의 x 좌표, y: 끝나는 점의 y 좌표

        ctx.beginPath();
        ctx.moveTo(400,400);
        ctx.lineTo(500,400);
        ctx.quadraticCurveTo(300,500,600,500);
        ctx.lineTo(600,600);
        ctx.stroke();

        // * bezierCurve 그리기

        // context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
        // cp1x: 조절하는 점 1번째 x 좌표, cp1y: 조절하는 점 1번째 y 좌표
        // cp2x: 조절하는 점 2번째 x 좌표, cp2y: 조절하는 점 2번째 y 좌표
        // x: 끝나는 점의 x 좌표, y: 긑나는 점의 y 좌표

        ctx.beginPath();
        ctx.moveTo(700,700);
        ctx.lineTo(900,700);
        ctx.bezierCurveTo(600, 750, 900, 900, 1000, 800);
        ctx.lineTo(1000, 1000);
        ctx.stroke();


    </script>

[ 결과화면 ]

canvas