HTML Canvas グラデーション

キャンバス - 拡散

拡散は矩形、円、線、テキストなどに使用できます。キャンバス上の形状は純色に限りません。

拡散には2種類あります：

• createLinearGradient(x,y,x1,y1) - 线性渐变
• createRadialGradient(x,y,r,x1,y1,r1) - 圆形/圆筒形渐变

拡散オブジェクトが得られたら、2つ以上の色標を追加する必要があります。

addColorStop()メソッドは、色の停止点とその拡散沿いの位置を指定します。拡散位置は0から1の間の任意の場所です。

拡散を使用するには、fillStyleまたはstrokeStyle属性を拡散に設定し、形状（矩形、テキスト、線など）を描画してください。

createLinearGradient()を使用して

インスタンス

線形拡散を作成します。拡散で矩形を塗りつぶします：

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 渐変を作成
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 渐变を塗りつぶす
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

自分で試してみてください

createRadialGradient()を使用して：

インスタンス

円形/円筒形の拡散を生成します。拡散で矩形を塗りつぶします：

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 渐変を作成
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 渐变を塗りつぶす
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

自分で試してみてください

も参照してください：

CodeW3C.comの完全なCanvasリファレンスマニュアル