Método addColorStop() de Canvas
Definición y uso
addColorStop() especifica los colores y posiciones en el objeto gradient.
El método addColorStop() con createLinearGradient() o createRadialGradient() Usar juntos.
Nota:Puede llamar varias veces al método addColorStop() para cambiar la transición. Si no utiliza este método en el objeto gradient, la transición no será visible. Para obtener una transición visible, debe crear al menos un marcador de color.
Ejemplo
Ejemplo 1
Definir una transición de color de negro a blanco como estilo de relleno del rectángulo:
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Consejo:Más ejemplos se proporcionan en la parte inferior de la página.
Sintaxis
gradient.addColorStop(stop,color);
Valores de los parámetros
| Parámetros | Descripción |
|---|---|
| stop | Un valor entre 0.0 y 1.0 que representa la posición entre el inicio y el final de la transición. |
| color | El valor del color CSS mostrado en la posición final. |
Más ejemplos
Ejemplo 2
Definir la transición de color mediante múltiples métodos addColorStop():
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente esta propiedad por primera vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
