Método createRadialGradient() de HTML canvas
Definición y uso
createLinearGradient() El método createRadialGradient() crea un objeto de transición radial/circular degradado.
El degradado se puede usar para rellenar rectángulos, círculos, líneas, texto, etc.
Consejo:Utilice este objeto como strokeStyle o fillStyle el valor de la propiedad.
Consejo:Utilice addColorStop() El método especifica diferentes colores y la ubicación de los colores en el objeto gradient.
Ejemplo
Dibujar un rectángulo y rellenarlo con una transición radial/circular degradado:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd =ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "rojo");
grd.addColorStop(1, "blanco");
// Rellenar con degradado
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,100);
Sintaxis
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Valores de parámetros
| Parámetros | Descripción |
|---|---|
| x0 | Coordenada x del círculo inicial del degradado |
| y0 | Coordenada y del círculo inicial del degradado |
| r0 | Radio del círculo inicial |
| x1 | Coordenada x del círculo final del degradado |
| y1 | Coordenada y del círculo final del degradado |
| r1 | Radio del final del círculo |
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente el atributo.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
