1 files changed, 96 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.html
new file mode 100644
index 0000000000..c443b4dc5a
--- /dev/null
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.html
@@ -0,0 +1,96 @@
+---
+title: CanvasRenderingContext2D.getTransform()
+slug: Web/API/CanvasRenderingContext2D/getTransform
+translation_of: Web/API/CanvasRenderingContext2D/getTransform
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getTransform()</code></strong> 方法获取当前被应用到上下文的转换矩阵</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate">let <em>storedTransform<strong> = </strong>ctx</em>.getTransform();
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>无.</p>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个 {{domxref("DOMMatrix")}} 对象</p>
+
+<p>转换矩阵被这样描述： <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></p>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>: 返回的对象不是实时的，所以更新它不会影响当前的转换矩阵，同时更新当前的转换矩阵不会影响已经返回的 <code>DOMMatrix</code>.</p>
+</div>
+
+<h2 id="示例">示例</h2>
+
+<p>在以下例子，我们有两个 {{htmlelement("canvas")}} 元素。我们使用  {{domxref("CanvasRenderingContext2D.setTransform()")}} 设置一个转换到第一个画布，并在上面画一个矩形，然后通过 <code>getTransform()</code> 获取矩阵。</p>
+
+<p>然后我们将获取到的矩阵作为 <code>DOMMatrix</code> 参数传给 <code>setTransform()</code> 设置到第二个画布，并在上面画一个圆。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas width="240"&gt;&lt;/canvas&gt;
+&lt;canvas width="240"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">canvas {
+  border: 1px solid black;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const canvases = document.querySelectorAll('canvas');
+const ctx1 = canvases[0].getContext('2d');
+const ctx2 = canvases[1].getContext('2d');
+
+ctx1.setTransform(1, .2, .8, 1, 0, 0);
+ctx1.fillRect(25, 25, 50, 50);
+
+let storedTransform = ctx1.getTransform();
+console.log(storedTransform);
+
+ctx2.setTransform(storedTransform);
+ctx2.beginPath();
+ctx2.arc(50, 50, 50, 0, 2 * Math.PI);
+ctx2.fill();</pre>
+
+<h4 id="结果">结果</h4>
+
+<p>{{ EmbedLiveSample('Examples', "100%", 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-gettransform", "CanvasRenderingContext2D.getTransform")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.getTransform")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>The interface defining this method: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.transform()")}}</li>
+</ul>