Ejemplo
Definir un gradiente que va desde el negro al blanco, como el estilo de relleno para el 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); Inténtalo tú mismo " Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.
| Método | |||||
|---|---|---|---|---|---|
| addColorStop() | Sí | 9.0 | Sí | Sí | Sí |
Definición y Uso
El addColorStop() método especifica los colores y la posición de un objeto en gradiente.
El addColorStop() método se utiliza junto con createLinearGradient() o createRadialGradient() .
Nota: Se puede llamar a la addColorStop() método varias veces para cambiar un gradiente.Si se omite este método para los objetos, el gradiente no será visible. Es necesario crear al menos un nivel de color para tener un gradiente visible.
| la sintaxis de JavaScript: | gradient.addColorStop(stop,color); |
|---|
Los valores de los parámetros
| Parámetro | Descripción | Juegalo |
|---|---|---|
| stop | Un valor entre 0.0 y 1.0 que representa la posición entre el inicio y el final de un gradiente | Juegalo " |
| color | Un valor de color CSS para que aparezca en la posición deparada | Juegalo " |
Más ejemplos
Ejemplo
Definir un gradiente con múltiples addColorStop() métodos:
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);
Inténtalo tú mismo "