initial commit

1 files changed, 133 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html
new file mode 100644
index 0000000000..db95fca214
--- /dev/null
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html
@@ -0,0 +1,133 @@
+---
+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 style="display: none;"></audio>
+</p>
+
+<p>
+ <audio style="display: none;"></audio>
+</p>
+
+<p>
+ <audio style="display: none;"></audio>
+</p>
+
+<p>
+ <audio style="display: none;"></audio>
+</p>