HTML-Leinwand createRadialGradient () -Methode
Beispiele
Zeichnen Sie ein Rechteck mit einem radialen / Kreisverlaufsfüllung:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
Versuchen »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari Unterstützung createRadialGradient () -Methode.
Hinweis: 8 und frühere Versionen von Internet Explorer unterstützt nicht das <canvas> -Element.
Definition und Verwendung
createRadialGradient () Methode erstellt eine radial / kreisförmigen Gradienten-Objekt.
Gradient kann verwendet werden, um füllen Rechtecke, Kreise, Linien, Text und so weiter.
Tipp: Verwenden Sie dieses Objekt als stroke oder fillStyle Wert der Immobilie.
Tipp: Verwenden Sie addColorStop () Methode gibt eine andere Farbe, als auch, wo das Farbverlauf - Objekt zu lokalisieren.
| JavaScript-Syntax: | Kontext .createRadialGradient (x0, y0, r0, x1, y1, r1); |
|---|
Parameter Wert
| 参数 | 描述 |
|---|---|
| x0 | 渐变的开始圆的 x 坐标 |
| y0 | 渐变的开始圆的 y 坐标 |
| r0 | 开始圆的半径 |
| x1 | 渐变的结束圆的 x 坐标 |
| y1 | 渐变的结束圆的 y 坐标 |
| r1 | 结束圆的半径 |