CanvasRenderingContext2D.arcTo()


    html5.jpg

 

설명


마지막으로 지정된  현재 좌표에서 처음 접점까지를 연결하는 직선과 두개의 접점을 연결하는 원호를 그린다.

과정은 다음과 같다.

마지막으로 지정된  현재 좌표(x0,y0)에서 (x1, y1)을 연결하는 직선, 그리고 (x1, y1)과 (x2, y2)를 연결하는 가상의 직선에

동시에 접하는 반지름(radius)의 가상의 원을 기준으로 호를 그린다.


분류


   경로 API


형태


    void CanvasRenderingContext2D.arcTo

                              (in float x1, in float y1, in float x2, in float y2, in float radius);


인수


in   float   x1                  호가 인접하는 첫번째 직선의 종료 가로 좌표

in   float   y1                  호가 인접하는 첫번째 직선의 종료 세로 좌표

in   float   x2                  호가 인접하는 두번째 직선의 종료 가로 좌표

in   float   y2                  호가 인접하는 두번째 직선의 종료 세로 좌표

in   float   radius           호의 반지름


               arcTo.png



반환


    없음


예제


<html> 

<head> 

   <script type="application/javascript"> 

    function draw() { 

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

      if (canvas.getContext) { 

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

 

         ctx.beginPath();

         ctx.moveTo( 10,10 );

         ctx.lineTo( 90,10 );

         ctx.lineTo( 90,80 );

         ctx.strokeStyle = "black"; 

         ctx.stroke();

        

         ctx.beginPath();

         ctx.moveTo( 70,10 );

         ctx.arcTo(90,10,90,30,30);

         ctx.strokeStyle = "red"; 

         ctx.stroke();

        

      } 

    } 

   </script> 

</head> 

<body onload="draw();"> 

   <canvas id="canvas" width="300" height="100"></canvas> 

</body> 

</html>


결과


      arcTo_02.png



이 게시물을...