CanvasRenderingContext2D.clip()


 html5.jpg


설명


    패쓰로 지정된 도형을 클립 영역으로 지정한다.



분류


    경로 API



형태


    void CanvasRenderingContext2D.clip();



인수


   없음



반환


   없음



예제


<html> 

<head> 

   <script type="application/javascript"> 

    function draw() { 

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

      if (canvas.getContext) { 

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

       

        var img = new Image();

        img.onload = function(){

        ctx.drawImage(img,0,0,500,344);

         }

         img.src = "flower.jpeg";

 

       ctx.beginPath();

        ctx.arc( 250,160,100,0, 2*Math.PI,true);

        ctx.closePath();

        ctx.clip();

        

      } 

    } 

   </script> 

</head> 

<body onload="draw();"> 

   <canvas id="canvas" width="500" height="400"></canvas> 

</body> 

</html>


결과


    clip.png

이 게시물을...