CanvasRenderingContext2D.quadraticCurveTo()


html5.jpg     

 

설명


한 개의 조절점( cpx, cpy )를 마지막으로 지정된 현재 좌표와 조절점 그리고 지정된점(x, y)에 인접한 원호를 그린다.


분류


   경로 API


형태


    void CanvasRenderingContext2D.quadraticCurveTo

                              (in float cpx, in float y1, in float cpy, in float x, in float y);


인수


in   float   cpx                호를 그리는 조절점 가로 좌표

in   float   cpy                호를 그리는 조절점 세로 좌표

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

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

         

    quadraticCurveTo.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,90 );

         ctx.lineTo( 100,10 );

         ctx.lineTo( 190,90 );

         ctx.strokeStyle = "black"; 

         ctx.stroke();

        

         ctx.beginPath();

         ctx.moveTo( 10,90 );

         ctx.quadraticCurveTo( 100,10, 190,90 );

         ctx.strokeStyle = "red"; 

         ctx.stroke();

        

      } 

    } 

   </script> 

</head> 

<body onload="draw();"> 

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

</body> 

</html>


결과


       quadraticCurveTo_Result.png



이 게시물을...