Manual de referencia HTML

Completo de etiquetas HTML

Método createRadialGradient() de HTML canvas

createRadialGradient() es un método de Canvas 2D API determina las coordenadas de dos círculos según los parámetros, dibuja el gradiente radiactivo. Este método devuelve CanvasGradient.

Manual de referencia de canvas HTML

Ejemplo en línea

Dibuja un rectángulo y usa un gradiente/Relleno de gradiente circular:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del método createRadialGradient() en HTML canvas (Tutoriales básicos de la web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="borde:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta 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>

Prueba y mira ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome y Safari admiten createRadialGradient() método.

Nota:Internet Explorer 8 y las versiones anteriores no admiten el elemento <canvas>.

Definición y uso

El método createRadialGradient() crea una gradiente/objeto de gradiente circular.
La gradiente se puede usar para rellenar rectángulos, círculos, líneas, texto, etc.

Consejo:Utilice este objeto comostrokeStyle o fillStyle el valor de la propiedad.

Consejo:Utilice addColorStop() El método especifica diferentes colores y en qué lugar del objeto gradient se colocan los colores.

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

Valor del parámetro

Parámetros	Descripción
x0	Coordenada x del círculo inicial de la gradiente
y0	Coordenada y del círculo inicial de la gradiente
r0	Radio del círculo inicial
x1	Coordenada x del círculo final de la gradiente
y1	Coordenada y del círculo final de la gradiente
r1	Radio del círculo final

Manual de referencia de canvas HTML

HTML: <template> etiqueta