EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

rect method

Creates a new closed rectangular subpath.

HTML Canvas 2D Context, Section 9Internet Explorer 9

Syntax

CanvasRenderingContext2D.rect(x, y, w, h);

Parameters

x [in]

Type: number

The x-coordinate, in pixels, of the upper-left corner of the rectangle in relation to the coordinates of the canvas.

y [in]

Type: number

The y-coordinate, in pixels, of the upper-left corner of the rectangle in relation to the coordinates of the canvas.

w [in]

Type: number

The width, in pixels, of the rectangle in relation to the coordinates of the canvas.

h [in]

Type: number

The height, in pixels, of the rectangle in relation to the coordinates of the canvas.

Return value

This method does not return a value.

Standards information

Remarks

The rect method creates a closed path for the rectangle and then starts a new subpath at the point (x, y). You can fill the rectangle by using the fillStyle property and the fill method.

Examples

The following code example creates three rectangles by using the rect method. The example uses the beginPath method between creating each rectangle to use different colors and styles.


<html>
<head>
  <title>Rect example</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          //  if canvas is supported, get context and draw three rects
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.beginPath();
              ctx.lineWidth = "3";
              ctx.strokeStyle = "blue";
              ctx.rect(5, 5, 300, 250);
              ctx.stroke();
              ctx.beginPath();
              ctx.lineWidth = "5";
              ctx.strokeStyle = "red";
              ctx.rect(150, 200, 300, 150);
              ctx.stroke();
              ctx.beginPath();
              ctx.lineJoin = "round";
              ctx.lineWidth = "10";
              ctx.strokeStyle = "green";
              ctx.rect(250, 50, 150, 250);
              ctx.stroke();
          }
      }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="600">This browser or document mode doesn't support canvas</canvas> 
</body>
</html>


See also

CanvasRenderingContext2D
fillStyle
beginPath
fillRect

 

 

표시:
© 2014 Microsoft