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
134
135
136
137
138
|
---
title: CanvasRenderingContext2D.imageSmoothingEnabled
slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
tags:
- Canvas
- CanvasRenderingContext2D
translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
---
<div>{{APIRef}}</div>
<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.imageSmoothingEnabled</code></strong> 是 Canvas 2D API 用来设置图片是否平滑的属性，true表示图片平滑（默认值），false表示图片不平滑。当我们获取 <code>imageSmoothingEnabled</code> 属性值时， 它会返回最新设置的值。</p>
<p> 以缩放画布为例，这个属性对像素为主的游戏很有用。默认的改变大小的算法会造成图片模糊并且破坏图片原有的像素。 如果那样的话，设置属性值为false。 参见 CSS {{cssxref("image-rendering")}} 属性。</p>
<div class="blockIndicator note">
<p><strong>注意:</strong>您可以使用{{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}}属性来调整平滑质量。</p>
</div>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><var><em>ctx</em>.imageSmoothingEnabled = value;</var></pre>
<h3 id="选项">选项</h3>
<dl>
<dt><code>value</code></dt>
<dd>一个{{jsxref("Boolean")}} 类型的值，表示图片是否平滑。</dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">使用 <code>imageSmoothingEnabled</code> 属性</h3>
<p>本示例比较了三个图像。 第一个图像以其自然大小绘制，第二个图像缩放为3倍并启用了图像平滑，而第三个图像缩放为3倍但禁用了图像平滑。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas" width="460" height="210"></canvas></pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '16px sans-serif';
ctx.textAlign = 'center';
const img = new Image();
img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png';
img.onload = function() {
const w = img.width,
h = img.height;
ctx.fillText('Source', w * .5, 20);
ctx.drawImage(img, 0, 24, w, h);
ctx.fillText('Smoothing = TRUE', w * 2.5, 20);
<code> ctx.imageSmoothingEnabled = true;</code>
ctx.drawImage(img, w, 24, w * 3, h * 3);
ctx.fillText('Smoothing = FALSE', w * 5.5, 20);
<code> ctx.imageSmoothingEnabled = false;</code>
ctx.drawImage(img, w * 4, 24, w * 3, h * 3);
};
</pre>
<div class="hidden">
<h2 id="Disabling_image_smoothing">Disabling_image_smoothing</h2>
<h3 id="HTML_2">HTML</h3>
<pre class="brush: html"><canvas id="canvas" width="460" height="210"></canvas></pre>
<h3 id="JavaScript_2">JavaScript</h3>
<pre class="brush: js">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '16px sans-serif';
ctx.textAlign = 'center';
const img = new Image();
img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png';
img.onload = function() {
const w = img.width,
h = img.height;
ctx.fillText('Source', w * .5, 20);
ctx.drawImage(img, 0, 24, w, h);
ctx.fillText('Smoothing = TRUE', w * 2.5, 20);
<code> ctx.imageSmoothingEnabled = true;</code>
ctx.drawImage(img, w, 24, w * 3, h * 3);
ctx.fillText('Smoothing = FALSE', w * 5.5, 20);
<code> ctx.imageSmoothingEnabled = false;</code>
ctx.drawImage(img, w * 4, 24, w * 3, h * 3);
};
</pre>
</div>
<h4 id="结果">结果</h4>
<p>{{ EmbedLiveSample('Disabling_image_smoothing', 700, 240) }}</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-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}</p>
<div id="compat-mobile"></div>
<h2 id="参见">参见</h2>
<ul>
<li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li>
<li>{{cssxref("image-rendering")}}</li>
</ul>
|
