HTML5 Canvas 漸變

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

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

有兩種類型的漸變:

1. Linear（線性）

2. Radial（徑向）

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

線性漸變

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

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個參數(shù)：x1，y1，x2，y2。這4個參數(shù)確定漸變圖案的方向和延伸。梯度從第一點x1，y1延伸到第二點x2，y2。
通過僅改變x軸上的參數(shù)值（對于x1和x2）來創(chuàng)建水平漸變，如下所示:

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

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

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

通過同時更改x和y軸參數(shù)來創(chuàng)建對角線漸變。這是一個示例:

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

顏色停止

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

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

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

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

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

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

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

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

context.fillStyle   = linearGradient1;

context.strokeStyle = linearGradient1;

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

<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,100,0); //horizontal gradient
linearGradient1.addColorStop(0  , 'rgb(255, 0,   0)');
linearGradient1.addColorStop(0.5, 'rgb(  0, 0, 255)');
linearGradient1.addColorStop(1  , 'rgb(  0, 0,   0)');

context.fillStyle = linearGradient1;
context.fillRect(10,10,100, 100);

var linearGradient2 = context.createLinearGradient(125,0, 225,0); //horizontal gradient
linearGradient2.addColorStop(0  , 'rgb(255, 0,   0)');
linearGradient2.addColorStop(0.5, 'rgb(  0, 0, 255)');
linearGradient2.addColorStop(1  , 'rgb(  0, 0,   0)');

context.strokeStyle = linearGradient2;
context.strokeRect(125, 10, 100, 100);

</script>

這是在畫布上繪制時的結果:

漸變梯度范圍

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

<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, 0, 350,0);
linearGradient1.addColorStop(0, 'rgb(0,   0, 255)');
linearGradient1.addColorStop(1, 'rgb(0, 255, 0)');

context.fillStyle = linearGradient1;

context.fillRect(10,10,130, 100);
context.fillRect(150,10, 200, 100);
context.fillRect(360,10, 130, 100);

context.fillRect(100,120, 150, 100);
context.fillRect(280,120, 150, 100);
</script>

這就是在畫布上繪制時的結果。請注意，只有x值在150到350之間的圖形才具有漸變顏色，而其余圖形是全藍色（第一個色標）或全綠色（最后一個色標）。

本示例僅在漸變中使用2種顏色，但是如果在漸變中使用3種或更多顏色，則效果相同。在漸變區(qū)域之外，僅使用第一個和最后一個停止色。
漸變程度對于理解正確著色形狀很重要。在許多情況下，可能必須為每種形狀專門定義漸變，以適合繪制形狀的區(qū)域。

徑向漸變

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

徑向漸變由2個圓定義。每個圓都有一個中心點和一個半徑。這是一個代碼示例:

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, y1, r1, x2, y2, r2);

radialGradient1.addColorStop(0, 'rgb(0,   0, 255)');
radialGradient1.addColorStop(1, 'rgb(0, 255,   0)');

context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);

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

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

var x1 = 100;
var y1 = 100;
var r1 = 30;
var x2 = 150;
var y2 = 125;
var r2 = 100;

var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0, 'rgb(0,   0, 255)');
radialGradient1.addColorStop(1, 'rgb(0, 255,   0)');

context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);

這是在畫布上繪制漸變時的樣子: