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
|
---
title: CanvasRenderingContext2D.createRadialGradient()
slug: Web/API/CanvasRenderingContext2D/createRadialGradient
translation_of: Web/API/CanvasRenderingContext2D/createRadialGradient
---
<div>{{APIRef}}</div>
<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createRadialGradient()</code></strong> 是 Canvas 2D API 根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回 {{domxref("CanvasGradient")}}。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox notranslate">CanvasGradient <var><em>ctx</em>.createRadialGradient(x0, y0, r0, x1, y1, r1);</var>
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>x0</code></dt>
<dd>开始圆形的 x 轴坐标。</dd>
<dt><code>y0</code></dt>
<dd>开始圆形的 y 轴坐标。</dd>
<dt>r0</dt>
<dd>开始圆形的半径。</dd>
<dt><code>x1</code></dt>
<dd>结束圆形的 x 轴坐标。</dd>
<dt><code>y1</code></dt>
<dd>结束圆形的 y 轴坐标。</dd>
<dt>r1</dt>
<dd>结束圆形的半径。</dd>
</dl>
<h3 id="返回值">返回值</h3>
<dl>
<dt>{{domxref("CanvasGradient")}}</dt>
<dd>由两个指定的圆初始化的放射性 <code>CanvasGradient</code> 对象。</dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="使用_createRadialGradient_方法">使用 <code>createRadialGradient</code> 方法</h3>
<p>这是一段简单的代码片段， 使用 <code>createRadialGradient</code> 方法创建一个指定了开始和结束圆的 {{domxref("CanvasGradient")}} 对象。 一旦创建，你可以使用 {{domxref("CanvasGradient.addColorStop()")}} 方法根据指定的偏移和颜色定义一个新的终止。你可以将当前的{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}设置成此渐变， 当使用{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，会在canvas上绘制出效果， 如示例所示。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[4] notranslate">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var gradient = ctx.createRadialGradient(100,100,100,100,100,0);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"green");
ctx.fillStyle = gradient;
ctx.fillRect(0,0,200,200);
</pre>
<p>修改下面的代码并在线查看 canvas的变化：</p>
<div style="display: none;">
<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="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
var gradient = ctx.createRadialGradient(100,100,100,100,100,0);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"green");
ctx.fillStyle = gradient;
ctx.fillRect(0,0,200,200);</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('Playable_code', 700, 360) }}</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-createradialgradient", "CanvasRenderingContext2D.createRadialGradient")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<p>{{Compat("api.CanvasRenderingContext2D.createRadialGradient")}}</p>
<div id="compat-mobile"></div>
<h3 id="Gecko-specific_注解">Gecko-specific 注解</h3>
<ul>
<li>从 Gecko 2.0 {{geckoRelease("2.0")}}开始， 指定非限制的值会抛出 <code>NOT_SUPPORTED_ERR</code> ，用来替代 <code>SYNTAX_ERR。</code></li>
<li>从 Gecko 5.0 {{geckoRelease("5.0")}}开始，指定一个负的半径会抛出 <code>INDEX_SIZE_ERR。</code></li>
</ul>
<h2 id="参见">参见</h2>
<ul>
<li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</li>
</ul>
|
