Manuale di riferimento HTML

Completo di tag HTML

Metodo HTML canvas createRadialGradient()

createRadialGradient() è un metodo dell'API Canvas 2D che determina le coordinate di due cerchi in base ai parametri per disegnare una gradazione radiante. Questo metodo restituisce un CanvasGradient.

Manuale di riferimento di HTML canvas

Esempio online

Disegna un rettangolo e riempi con una gradazione radial/circolare:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Utilizzo del metodo createRadialGradient() su HTML canvas (Basic Tutorial Web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.
</canvas>
<script>
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");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
</script>
</body>
</html>

Testa per vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome e Safari supportano createRadialGradient() metodo.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

Il metodo createRadialGradient() crea un oggetto di progressione radiale/circolare.
La progressione può essere utilizzata per riempire rettangoli, cerchi, linee, testi e altro.

Suggerimento:Utilizzare questo oggetto comestrokeStyle o fillStyle valore dell'attributo.

Suggerimento:Utilizzare addColorStop() Il metodo definisce diversi colori e dove posizionare i colori nell'oggetto gradient.

Sintassi JavaScript:	context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Valore del parametro

Parametro	Descrizione
x0	Coordinata x di inizio del cerchio della progressione
y0	Coordinata y di inizio del cerchio della progressione
r0	Raggio di inizio del cerchio
x1	Coordinata x di fine del cerchio della progressione
y1	Coordinata y di fine del cerchio della progressione
r1	Raggio di fine del cerchio

Manuale di riferimento di HTML canvas

HTML: <template> etichetta