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

scale method

Scales the current context by the specified horizontal (x) and vertical (y) factors.

HTML Canvas 2D Context, Section 3Internet Explorer 9

Syntax

CanvasRenderingContext2D.scale(x, y);

Parameters

x [in]

Type: number

The horizontal scaling factor, where 1 equals unity or 100% scale.

y [in]

Type: number

The vertical scaling factor.

Return value

This method does not return a value.

Standards information

Remarks

When you create a CanvasRenderingContext2D object, it has a transformation matrix that identifies the current state. The scale method modifies the transformation by multiplying the matrix by the specified factor. For example, context.scale(1,.5) halves the vertical (or y-axis) values that are used in context and leaves the horizontal (or x-axis) values the same. Similarly, context.scale(2,2) doubles the size of the graphics.

Examples

The following code example shows scaling when it draws several rectangles .


<html>
<head>
    <title>Scale example</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          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();
          }
      }
      function scaleRect() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.clearRect(0, 0, canvas.width, canvas.height);    // Clear the rectangle before scaling.
              var xFactor = document.getElementById("xScale").value;
              var yFactor = document.getElementById("yScale").value;
              ctx.scale(xFactor, yFactor);
              draw();
          }
      }
      function refresh() {
          window.location.reload(false);           // Reload the page.
      }
  </script>
</head>
<body onload="draw();">   
        <div>
            <button onclick="scaleRect()">Do scaling</button>
                  
            <select id="xScale" name="xScale">
                <option value=".25">25%</option>
                <option value=".5">50%</option>
                <option value=".75">75%</option>
                <option value="1">100%</option>
                <option value="1.25">125%</option>
                <option value="1.5">150%</option>
                <option value="1.75">175%</option>
                <option value="2.">200%</option>
                <option value="3">300%</option>
            </select>
            <select id="yScale" name="yScale">
                <option value=".25">25%</option>
                <option value=".5">50%</option>
                <option value=".75">75%</option>
                <option value="1">100%</option>        
                <option value="1.25">125%</option>
                <option value="1.5">150%</option>
                <option value="1.75">175%</option>
                <option value="2.">200%</option>
                <option value="3">300%</option>
            </select>                
            <button onclick="refresh()">refresh page</button>
    </div>        
    <div>
        <canvas id="MyCanvas" width="1200" height="800">This browser or document mode doesn't support canvas </canvas> 
    </div>
</body>
</html>


See also

CanvasRenderingContext2D

 

 

표시:
© 2014 Microsoft