Método HTML canvas addColorStop()

❮ Referencia de lienzo HTML

Ejemplo

Defina un degradado que vaya de negro a blanco, como estilo de relleno para el rectángulo:

Su navegador no es compatible con HTML5canvastag.

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() Yes 9.0 Yes Yes Yes

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():

Su navegador no es compatible con el lienzo.

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);

❮ Referencia de lienzo HTML