html5 Canvas漸變是可以用作形狀的填充或筆觸的顏色模式，而不是純色。漸變是從一種顏色漸變到另一種顏色的顏色模式。漸變有兩種類型：Linear（線性）和Radial（徑向）

html5 Canvas漸變是可以用作形狀的填充或筆觸的顏色模式，而不是純色。漸變是從一種顏色漸變到另一種顏色的顏色模式。這里有一些示例來(lái)說(shuō)明我的意思:

有兩種類型的漸變:

Linear（線性）
Radial（徑向）

線性漸變使用水平，垂直或?qū)�角線的線性圖案更改顏色。
徑向漸變用圓形圖案改變顏色，從里到外改變顏色。
兩種類型的漸變都在本文中介紹。

線性漸變

如前所述，線性漸變使用線性圖案更改顏色。使用2D上下文函數(shù)創(chuàng)建線性漸變 createLinearGradient()。這是一個(gè)示例:

var canvas  = document.getElementById("ex1");var context = canvas.getContext("2d");
    
var x1 =   0;
var y1 =   0;
var x2 = 100;
var y2 =   0;
var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

該createLinearGradient()函數(shù)采用4個(gè)參數(shù)：x1，y1，x2，y2。這4個(gè)參數(shù)確定漸變圖案的方向和延伸。梯度從第一點(diǎn)x1，y1延伸到第二點(diǎn)x2，y2。
通過(guò)僅改變x軸上的參數(shù)值（對(duì)于x1和x2）來(lái)創(chuàng)建水平漸變，如下所示:

var x1 =   0;
var y1 =   0;    var x2 = 100;
var y2 =   0;
var linearGradient1 = context.createLinearGradient(x1, y2);

通過(guò)僅更改y軸上的參數(shù)值（對(duì)于y1和y2）來(lái)創(chuàng)建垂直漸變，如下所示:

var x1 =   0;    var y1 =   0;
var x2 =   0;    var y2 = 100;
var linearGradient1 = context.createLinearGradient(x1, y2);

通過(guò)同時(shí)更改x和y軸參數(shù)來(lái)創(chuàng)建對(duì)角線漸變。這是一個(gè)示例:

var x1 =   0;
var y1 =   0;
var x2 = 100;
var y2 = 100;
var linearGradient1 = context.createLinearGradient(x1, y2);

顏色停止

上面的示例未顯示漸變的顏色。為了設(shè)置漸變的顏色，可以addColorStop()在漸變對(duì)象上使用該功能。這是一個(gè)示例:

var linearGradient1 = context.createLinearGradient(0,100,0);
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(1, 'rgb(  0, 0)');

該addColorStop()函數(shù)有2個(gè)參數(shù)。第一個(gè)參數(shù)是介于0和1之間的數(shù)字。該數(shù)字表明此色標(biāo)將放置在漸變區(qū)域中的距離。第二個(gè)參數(shù)是顏色本身。請(qǐng)注意，此示例如何使用rbg(red,green,blue)顏色表示法，其中每個(gè)紅色/綠色/藍(lán)色值可以是0到255之間的數(shù)字（以1個(gè)字節(jié)表示）。
上面的示例添加了兩個(gè)色標(biāo)。第一個(gè)是紅色，設(shè)置為從漸變的起點(diǎn)開(kāi)始（第一個(gè)參數(shù)值為0）。第二種顏色是黑色，設(shè)置為位于漸變區(qū)域的末尾（第一個(gè)參數(shù)為1）。
您可以為漸變添加兩個(gè)以上的色標(biāo)。這是一個(gè)具有3個(gè)色標(biāo)的示例:

var linearGradient1 = context.createLinearGradient(0,0);
linearGradient1.addColorStop(0  , 0)');
linearGradient1.addColorStop(0.5, 255);
linearGradient1.addColorStop(1  , 0)');

此示例添加了位于漸變中間的藍(lán)色。漸變將因此從紅色平滑變?yōu)樗{(lán)色，然后變?yōu)楹谏��?/p>

使用漸變作為填充或描邊樣式

您可以將漸變用作填充或筆觸樣式。只需將2D上下文fillStyle或strokeStyle屬性設(shè)置為指向漸變對(duì)象即可完成此操作。這是一個(gè)示例:

var linearGradient1 = context.createLinearGradient(0, 0)');
 
context.fillStyle   = linearGradient1;
 
context.strokeStyle = linearGradient1;

現(xiàn)在，您可以使用漸變作為填充或描邊顏色進(jìn)行繪制。這是一個(gè)繪制兩個(gè)矩形的示例-一個(gè)被填充，另一個(gè)被描邊（概述）:

示例

<canvas id="ex2" width="500" height="125" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
var canvas  = document.getElementById("ex2");
var context = canvas.getContext("2d");
 
var linearGradient1 = context.createLinearGradient(0,0); //horizontal gradient
linearGradient1.addColorStop(0  ,   0)');
linearGradient1.addColorStop(0.5, 255)');
linearGradient1.addColorStop(1  ,   0)');
 
context.fillStyle = linearGradient1;
context.fillRect(10,10, 100);
 
var linearGradient2 = context.createLinearGradient(125, 225,0); //horizontal gradient
linearGradient2.addColorStop(0  ,   0)');
linearGradient2.addColorStop(0.5, 255)');
linearGradient2.addColorStop(1  ,   0)');
 
context.strokeStyle = linearGradient2;
context.strokeRect(125, 10, 100, 100);
 
</script>

這是在畫(huà)布上繪制時(shí)的結(jié)果:

漸變梯度范圍

重要的是要了解漸變的程度。如果漸變從x = 10擴(kuò)展到x = 110，則只有x值在10到110之間的圖形才會(huì)應(yīng)用漸變顏色。在此區(qū)域之外繪制的圖形仍會(huì)受到漸變的影響，但是將使用漸變的第一種或最后一種顏色進(jìn)行繪制。
例如，假設(shè)一個(gè)梯度從x = 150擴(kuò)展到x =350。該梯度將從藍(lán)色漸變?yōu)榫G色。x值小于150繪制的所有圖形都將以藍(lán)色繪制。x值大于350繪制的所有圖形都將以綠色繪制。只有x值介于150和350之間的圖形才會(huì)具有漸變顏色。
這是一個(gè)代碼示例，該示例使用上述漸變繪制了5個(gè)矩形，以說(shuō)明這一點(diǎn)

示例

<canvas id="ex3" width="500" height="250" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
 
<script>
var canvas  = document.getElementById("ex3");
var context = canvas.getContext("2d");
 
var linearGradient1 = context.createLinearGradient(150, 350, 'rgb(0,   0, 255)');
linearGradient1.addColorStop(1, 255, 0)');
 
context.fillStyle = linearGradient1;
 
context.fillRect(10,130, 100);
context.fillRect(150, 200, 100);
context.fillRect(360, 130, 100);
 
context.fillRect(100,120, 150, 100);
context.fillRect(280, 100);
</script>

這就是在畫(huà)布上繪制時(shí)的結(jié)果。請(qǐng)注意，只有x值在150到350之間的圖形才具有漸變顏色，而其余圖形是全藍(lán)色（第一個(gè)色標(biāo)）或全綠色（最后一個(gè)色標(biāo)）。

本示例僅在漸變中使用2種顏色，但是如果在漸變中使用3種或更多顏色，則效果相同。在漸變區(qū)域之外，僅使用第一個(gè)和最后一個(gè)停止色。

漸變程度對(duì)于理解正確著色形狀很重要。在許多情況下，可能必須為每種形狀專門定義漸變，以適合繪制形狀的區(qū)域。

徑向漸變

徑向漸變類型是從內(nèi)部顏色向外延伸到一種或多種其他顏色的圓形圖案。以下是一些圖形示例:

徑向漸變由2個(gè)圓定義。每個(gè)圓都有一個(gè)中心點(diǎn)和一個(gè)半徑。這是一個(gè)代碼示例:

var x1 = 100;   // x of 1. circle center point
var y1 = 100;   // y of 1. circle center point
var r1 = 30;    // radius of 1. circle
 
var x2 = 100;   // x of 2. circle center point
var y2 = 100;   // y of 2. circle center point
var r2 = 100;   // radius of 2. circle
 
var radialGradient1 = context.createradialGradient(x1, r1, y2, r2);
 
radialGradient1.addColorStop(0, 255)');
radialGradient1.addColorStop(1,   0)');
 
context.fillStyle = radialGradient1;
context.fillRect(10, 200);

如您所見(jiàn)，定義了兩個(gè)中心點(diǎn)（x1，y1和x2，y2），并且定義了兩個(gè)半徑（r1和r2）。這些作為參數(shù)傳遞給createradialGradient()2D上下文的功能。
應(yīng)該用不同的半徑定義兩個(gè)圓，因此它們將導(dǎo)致一個(gè)內(nèi)圓和一個(gè)外圓（至少大小）。然后，漸變中的顏色將從一個(gè)圓圈圓形延伸到另一個(gè)圓圈。
色標(biāo)的工作方式與線性漸變一樣。它們定義了在漸變中使用什么顏色，以及應(yīng)該在漸變范圍內(nèi)放置什么顏色。
添加的色標(biāo)將在兩個(gè)圓圈之間的某個(gè)位置匹配。例如，顏色停止中的第一個(gè)參數(shù)0表示顏色將從第一個(gè)圓圈開(kāi)始的地方開(kāi)始。顏色停止中的第一個(gè)參數(shù)1表示顏色將從第二個(gè)圓圈開(kāi)始的地方開(kāi)始。
這是在HTML5畫(huà)布上繪制時(shí)的代碼示例的結(jié)果:

如果兩個(gè)圓具有相同的中心點(diǎn)，則漸變將是完全圓形的，并且顏色從內(nèi)圓到外圓漸變。如果兩個(gè)圓的中心點(diǎn)不同，則漸變將更像圓錐形，就像從燈投射的光（非正交地指向表面）一樣。這是一個(gè)類似錐形的代碼示例:

var x1 = 100;
var y1 = 100;
var r1 = 30;
var x2 = 150;
var y2 = 125;
var r2 = 100;
 
var radialGradient1 = context.createradialGradient(x1, r2);
radialGradient1.addColorStop(0, 200);

這是在畫(huà)布上繪制漸變時(shí)的樣子: