CanvasRenderingContext2D.closePath()


html5.jpg  

 

설명


    그리던 경로를 종료한다.

    마지막 그렸던 지점부터 시작점까지 직선을 그린다.

    이미 도형이 닫혀 있다면 이 함수를 사용하지 않아도 된다.



분류


   경로 API



형태


    any CanvasRenderingContext2D.closePath();



인수


    없음



반환


    없음



예제


<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(10,90);

         ctx.closePath();

         ctx.fillStyle = "rgb(200,0,0)"; 

         ctx.fill();

         ctx.strokeStyle = "rgb(200,0,0)"; 

 

         ctx.beginPath();

         ctx.moveTo(90,10);

         ctx.lineTo(90,90);

         ctx.lineTo(10,90);

         ctx.closePath();

         ctx.strokeStyle = "black"; 

         ctx.stroke();

        

      } 

    } 

   </script> 

</head> 

<body onload="draw();"> 

   <canvas id="canvas" width="150" height="150"></canvas> 

</body> 

</html>


결과


    closePath.png



이 게시물을...