Metodo canvas HTML createRadialGradient ()
HTML Manuale di tela di riferimento
Esempi
Disegnare un rettangolo con un riempimento gradiente radiale / circolare:
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);
Prova »
Supporto per il browser
Internet Explorer metodo 9, Firefox, Opera, Chrome e Safari supporto createRadialGradient ().
Nota: 8 e versioni precedenti di Internet Explorer non supportano l'elemento <canvas>.
Definizione e utilizzo
Metodo createRadialGradient () crea un oggetto gradiente radiale / circolare.
Gradiente può essere utilizzato per riempire rettangoli, cerchi, linee, testo e così via.
Suggerimento: utilizzare questo oggetto come strokeStyle o fillStyle valore della proprietà.
Suggerimento: Usa addColorStop () metodo specifica un colore diverso, così come dove per individuare l'oggetto sfumatura di colore.
| sintassi JavaScript: | contesto .createRadialGradient (X0, Y0, R0, X1, Y1, R1); |
|---|
Valore parametro
| 参数 | 描述 |
|---|---|
| x0 | 渐变的开始圆的 x 坐标 |
| y0 | 渐变的开始圆的 y 坐标 |
| r0 | 开始圆的半径 |
| x1 | 渐变的结束圆的 x 坐标 |
| y1 | 渐变的结束圆的 y 坐标 |
| r1 | 结束圆的半径 |
HTML Manuale di tela di riferimento