Latest web development tutorials

Metodo canvas HTML addColorStop ()

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento

Esempi

Definire una sfumatura dal nero al bianco, uno stile di riempimento di rettangolo:

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

Prova »

Supporto per il browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer metodo 9, Firefox, Opera, Chrome e Safari supporto addColorStop ().

Nota: 8 e versioni precedenti di Internet Explorer non supportano l'elemento <canvas>.

Definizione e utilizzo

addColorStop () metodo specifica il colore oggetto di pendenza e la posizione.

addColorStop () metodo createLinearGradient () o createRadialGradient () utilizzati insieme.

Nota: È possibile chiamare addColorStop () il metodo più volte per cambiare il gradiente.Se non sei un oggetto pendenza, utilizzando questo metodo, il gradiente non sarà visibile. Al fine di ottenere gradiente visibile, è necessario creare almeno un colore.

sintassi JavaScript: gradiente.addColorStop (stop, colore);

Valore parametro

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

Esempi

Altri esempi

Esempi

Essa è definita da una pluralità di addColorStop gradiente () Metodo:

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

Prova »

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento