Método HTML canvas addColorStop()
Ejemplo
Defina un degradado que vaya de negro a blanco, como 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);
Compatibilidad con navegador
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.
| Method | |||||
|---|---|---|---|---|---|
| addColorStop() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definición y uso
El método addColorStop() especifica los colores y la posición en un objeto degradado.
El método addColorStop() se usa junto con createLinearGradient() o createRadialGradient() .
Nota: Puede llamar al método addColorStop() varias veces para cambiar un degradado. Si omite este método para los objetos degradados, el degradado no será visible. Debe crear al menos una parada de color para tener un degradado visible.
| Sintaxis de JavaScript: | degradado .addColorStop( detener , color ); |
|---|
Valores paramétricos
| Parameter | Description | Play it |
|---|---|---|
| stop | A value between 0.0 and 1.0 that represents the position between start and end in a gradient | |
| color | A CSS color value to display at the stop position |
Más ejemplos
Ejemplo
Defina un degradado con varios 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);