Latest web development tutorials

Metoda HTML canvas addColorStop ()

HTML Instrukcja płótno referencyjny HTML Instrukcja płótno referencyjny

Przykłady

Definiowanie gradientu od czerni do bieli, styl wypełnienia prostokąta:

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

Spróbuj »

Pomoc Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome i Safari wsparcie addColorStop metoda ().

Uwaga: 8 i wcześniejsze wersje programu Internet Explorer nie obsługuje <canvas> elementu.


Definicja i Wykorzystanie

addColorStop () metoda określa kolor gradientu i położenie obiektu.

addColorStop () w createLinearGradient () lub createRadialGradient () stosuje się razem.

Uwaga: Można dzwonić addColorStop () metoda wielokrotnie zmienić gradient.Jeżeli nie jesteś gradient obiektu, za pomocą tej metody, gradient nie będzie widoczny. W celu uzyskania widocznego gradientu, trzeba utworzyć co najmniej jeden kolor.

Składnia JavaScript: Gradient.addColorStop (stop, kolor);

parametr Wartość

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


Przykłady

Więcej przykładów

Przykłady

Jest ona zdefiniowana przez zbiór addColorStop gradientu () Metoda:

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

Spróbuj »


HTML Instrukcja płótno referencyjny HTML Instrukcja płótno referencyjny