---
title: CanvasRenderingContext2D.scale()
slug: Web/API/CanvasRenderingContext2D/scale
translation_of: Web/API/CanvasRenderingContext2D/scale
---
<div>{{APIRef}}</div>

<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scale()</code></strong> 是 Canvas 2D API 根据 x 水平方向和 y 垂直方向，为canvas 单位添加缩放变换的方法。</p>

<p>默认的， 在 canvas 中一个单位实际上就是一个像素。例如，如果我们将0.5作为缩放因子，最终的单位会变成0.5像素，并且形状的尺寸会变成原来的一半。相似的方式，我们将2.0作为缩放因子，将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox notranslate">void <var><em>ctx</em>.scale(x, y);</var>
</pre>

<h3 id="参数">参数</h3>

<dl>
 <dt><code>x</code></dt>
 <dd>水平方向的缩放因子。A negative value flips pixels across the vertical axis. A value of <code>1</code> results in no horizontal scaling.</dd>
 <dt>y</dt>
 <dd>垂直方向的缩放因子。A negative value flips pixels across the horizontal axis. A value of <code>1</code> results in no vertical scaling.</dd>
</dl>

<h2 id="示例">示例</h2>

<h3 id="Scaling_a_shape" name="Scaling_a_shape">使用 <code>scale</code> 方法</h3>

<p>这是一段使用 <code>scale</code> 方法的简单的代码片段。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
</pre>

<h4 id="JavaScript">JavaScript</h4>

<p>The rectangle has a specified width of 8 and a height of 20. The transformation matrix scales it by 9x horizontally and by 3x vertically. Thus, its final size is a width of 72 and a height of 60.</p>

<p>Notice that its position on the canvas also changes. Since its specified corner is (10, 10), its rendered corner becomes (90, 30).</p>

<pre class="brush: js notranslate">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Scaled rectangle
ctx.scale(9, 3);
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 8, 20);

// Reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

// Non-scaled rectangle
ctx.fillStyle = 'gray';
ctx.fillRect(10, 10, 8, 20);</pre>

<h4 id="结果">结果</h4>

<p>The scaled <span style="color: red;">rectangle is red</span>, and the <span style="color: gray;">non-scaled rectangle is gray</span>.</p>

<p>{{ EmbedLiveSample('Scaling_a_shape', 700, 180) }}</p>

<h3 id="Flipping_things_horizontally_or_vertically" name="Flipping_things_horizontally_or_vertically">使用 scale 水平或竖直翻转</h3>

<p>你可以使用 <code>ctx.scale(-1, 1)</code> 水平翻转上下文，使用 <code>ctx.scale(1, -1)</code> 垂直翻转上下文。在这个例子中，"Hello world!" 被水平翻转。</p>

<p>Note that the call to {{domxref("CanvasRenderingContext2D.fillText()", "fillText()")}} specifies a negative x coordinate. This is to adjust for the negative scaling factor: <code>-280 * -1</code> becomes <code>280</code>, and text is drawn leftwards from that point.</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
</pre>

<h4 id="JavaScript_2">JavaScript</h4>

<pre class="brush: js; highlight:[4] notranslate">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.scale(-1, 1);
ctx.font = '48px serif';
ctx.fillText('Hello world!', -280, 90);
ctx.setTransform(1, 0, 0, 1, 0, 0);
</pre>

<h4 id="Result">Result</h4>

<p>{{ EmbedLiveSample('Flipping_things_horizontally_or_vertically', 700, 180) }}</p>

<h2 id="规范描述">规范描述</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("api.CanvasRenderingContext2D.scale")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>接口定义，{{domxref("CanvasRenderingContext2D")}}</li>
</ul>

<p>
 <audio class="hidden"></audio>
</p>

<p>
 <audio class="hidden"></audio>
</p>

<p>
 <audio class="hidden"></audio>
</p>

<p>
 <audio class="hidden"></audio>
</p>