Latest web development tutorials

méthode toile HTML addColorStop ()

HTML Manuel toile de référence HTML Manuel toile de référence

Exemples

Définir un gradient du noir au blanc, un style rectangle de remplissage:

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

Essayez »

support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, la méthode Firefox, Opera, Chrome et Safari soutien addColorStop ().

Note: 8 et versions antérieures d'Internet Explorer ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

addColorStop () méthode spécifie la couleur et la position de l'objet de gradient.

addColorStop () méthode createLinearGradient () ou createRadialGradient () utilisés ensemble.

Remarque: Vous pouvez appeler addColorStop () méthode plusieurs fois pour changer le gradient.Si vous n'êtes pas un objet gradient, en utilisant cette méthode, le gradient ne sera pas visible. Afin d'obtenir un gradient visible, vous devez créer au moins une couleur.

Syntaxe JavaScript: gradient.addColorStop (arrêt, couleur);

Paramètre Valeur

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

Exemples

D'autres exemples

Exemples

Elle est définie par une pluralité de addColorStop gradient () de la méthode:

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

Essayez »

HTML Manuel toile de référence HTML Manuel toile de référence