---
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>