Latest web development tutorials

addColorStop lienzo HTML método ()

Objeto de la lona de referencia objeto Canvas

Ejemplos

Definir un gradiente de negro a blanco, un estilo de relleno rectángulo:

YourbrowserdoesnotsupporttheHTML5canvastag.

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

Trate »

Soporte para el navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, el método de Firefox, Opera, Chrome y Safari addColorStop apoyo ().

Nota: 8 y versiones anteriores de Internet Explorer no son compatibles con el elemento <canvas>.


Definición y Uso

addColorStop () método especifica el color del objeto y la posición del gradiente.

addColorStop () método createLinearGradient () o createRadialGradient () utiliza juntos.

Nota: Puede llamar addColorStop () método varias veces para cambiar el gradiente.Si usted no es un objeto de gradiente, usando este método, el gradiente no será visible. Con el fin de obtener gradiente visible, es necesario crear al menos un color.

la sintaxis de JavaScript: gradiente.addColorStop (parada, color);

parámetro Valor

参数 描述
stop 介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
color stop位置显示的 CSS 颜色值


Ejemplos

más ejemplos

Ejemplos

Se define por una pluralidad de método addColorStop gradiente ():

Yourbrowserdoesnotsupportthecanvastag.

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

Trate »


Objeto de la lona de referencia objeto Canvas