English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

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:

Su navegador, no admite HTML5 etiqueta canvas.
<!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ámetrosDescripción
x0Coordenada x del círculo inicial de la gradiente
y0Coordenada y del círculo inicial de la gradiente
r0Radio del círculo inicial
x1Coordenada x del círculo final de la gradiente
y1Coordenada y del círculo final de la gradiente
r1Radio del círculo final
Manual de referencia de canvas HTML