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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
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"><canvas id="canvas"></canvas>
</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"><canvas id="canvas"></canvas>
</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>
|
