CanvasRenderingContext2D.rect()


    html5.jpg

 

설명


    사각형을 그린다.


분류


   경로 API


형태


    void CanvasRenderingContext2D.rect(in float x, in float y, in float w, in float h);


인수


    in     float    x     사각 영역의 왼쪽 위 가로 좌표

    in     float    y     사각 영역의 왼쪽 위 세로 좌표

    in     float    w    사각 영역의 가로 폭

    in     float    h     사각 영역의 세로 폭


반환


    없음


예제


<html> 

<head> 

   <script type="application/javascript"> 

    function draw() { 

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

      if (canvas.getContext) { 

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

 

         ctx.beginPath();

         ctx.rect (10,10,90,90);

         ctx.fillStyle = "red";

         ctx.fill();

         ctx.strokeStyle = "black"; 

         ctx.stroke();

      } 

    } 

   </script> 

</head> 

<body onload="draw();"> 

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

</body> 

</html>


결과


     rect.png



이 게시물을...