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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: CanvasRenderingContext2D.createLinearGradient()
slug: Web/API/CanvasRenderingContext2D/createLinearGradient
translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient
---
<div>{{APIRef}}</div>
<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong>方法创建一个沿参数坐标指定的直线的渐变。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14681/mdn-canvas-linearGradient.png" style="height: 121px; width: 264px;"></p>
<p>该方法返回一个线性 {{domxref("CanvasGradient")}}对象。想要应用这个渐变，需要把这个返回值赋值给 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 或者 {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox notranslate">CanvasGradient <var><em>ctx</em>.createLinearGradient(x0, y0, x1, y1);</var>
</pre>
<p><code>createLinearGradient()</code> 方法需要指定四个参数，分别表示渐变线段的开始和结束点。</p>
<h3 id="参数">参数</h3>
<dl>
<dt><code>x0</code></dt>
<dd>起点的 x 轴坐标。</dd>
<dt><code>y0</code></dt>
<dd>起点的 y 轴坐标。</dd>
<dt><code>x1</code></dt>
<dd>终点的 x 轴坐标。</dd>
<dt><code>y1</code></dt>
<dd>终点的 y 轴坐标。</dd>
</dl>
<h3 id="返回值">返回值</h3>
<dl>
<dt>{{domxref("CanvasGradient")}}</dt>
<dd>一个根据指定线路初始化的线性<code> </code><span style="font-family: consolas,monaco,andale mono,monospace;"><code>CanvasGradient</code> 对象。</span></dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="使用线性渐变填充一个矩形">使用线性渐变填充一个矩形</h3>
<p>这个例子使用<code>createLinearGradient()</code> 方法初始化了一个线性渐变。在这个线性渐变中添加了三种色彩。最后，这个渐变被赋值给上下文对应的属性，实现了对矩形的填充。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="notranslate">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Create a linear gradient
// The start gradient point is at x=20, y=0
// The end gradient point is at x=220, y=0
var gradient = ctx.createLinearGradient(20,0, 220,0);
// Add three color stops
gradient.addColorStop(0, 'green');
gradient.addColorStop(.5, 'cyan');
gradient.addColorStop(1, 'green');
// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 100);</pre>
<h4 id="结果">结果</h4>
<div class="hidden">
<h6 id="Playable_code">Playable code</h6>
<pre class="brush: html notranslate"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="编辑" />
<input id="reset" type="button" value="重置" />
</div>
<textarea id="code" class="playable-code">
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"white");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,200,100);</textarea>
</pre>
<pre class="brush: js notranslate">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
</pre>
</div>
<p>{{ EmbedLiveSample('Filling_a_rectangle_with_a_linear_gradient', 700, 180) }}</p>
<h2 id="规范描述">规范描述</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p>
<h3 id="Gecko特性说明">Gecko特性说明</h3>
<ul>
<li>自 Gecko 2.0 {{geckoRelease("2.0")}}开始，参数指定了极值会抛出<code>NOT_SUPPORTED_ERR</code> 而不再是之前的 <code>SYNTAX_ERR </code>异常。</li>
</ul>
<h2 id="参见"><br>
<span style="">参见</span></h2>
<div id="compat-mobile"></div>
<ul>
<li>接口定义： {{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li>
</ul>
|
