1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
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 & c & e \\ b & d & f \\ 0 & 0 & 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"><canvas width="240"></canvas>
<canvas width="240"></canvas>
</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>
|
