Metni addColorStop()

Mado ya Canvas

定义和用法

addColorStop() 方法规定 gradient 对象中的颜色和位置。

addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。

Mawachia:您可以多次调用 addColorStop() 方法来改变渐变。如果您不对 gradient 对象使用该方法，那么渐变将不可见。为了获得可见的渐变，您需要创建至少一个色标。

Mfano

Mfano 1

Kufasili matokeo wa matokeo kutoka kwa kijani hadi kwa kijani kama rangi ya kufill kwa ukweli wa kuzingatia.

Huduma ya kusoma kwa programu ya kusoma inayotumia HTML5 canvas tag inaingizwa.

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

Tafuta tena kwa ujenzi

Mtaarifu:Mafanikio mengi zinaonyeshwa kwenye mawaka ya chini.

Inasababisha

gradient.addColorStop(stop,color);

Wadhihiko wa parameter

Parameter Maelezo
stop Wadhihiko wa kidini kati ya 0.0 na 1.0, inaeleza uwanja wa kuanzia na kufikia katika matokeo wa matokeo.
color Marejeo ya rangi ya CSS inayotokana na kituo cha mifano cha kuzingatia kuzingatia.

Mafanikio mengi

Mfano 2

Kufanya matokeo kwa kutumia maelezo addColorStop() mengi:

Huduma ya kusoma kwa programu ya kusoma inayotumia HTML5 canvas tag inaingizwa.

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

Tafuta tena kwa ujenzi

Mfano wa kusoma kwa programu ya kusoma

Inani za kati zinaonyesha na msingi kifungua kwa programu ya kusoma kwa uwezo wa kufungua tabia hii.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Mawachia:Internet Explorer 8 na zaidi ya zamani hawana msaada wa kuelewa kwa kifaa cha <canvas>.

Mado ya Canvas