EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

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

 

 

Afficher:
© 2014 Microsoft