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 del 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definición y Uso
El addColorStop() método especifica los colores y la posición en un objeto de gradiente.
El addColorStop() método se utiliza junto con createLinearGradient() o createRadialGradient() .
Note: Puede llamar al 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 en un gradiente | Juegalo " |
| color | Un valor de color CSS para que aparezca en la stop posición | 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 "