私はHTML5キャンバスグラデーションを学んでいます。 createLinearGradient(x,y,x1,y1)は、（x、y）から（x1、y1）までの直線勾配を作成することを理解しました。しかし、what I have readからは、カラーストップとそのグラデーションに沿った位置を指定するaddColorStop()があります。このメソッドは2つのパラメータをとりますが、これは簡単で色はわかりますが、0と1の間の値を取るグラデーションの位置はわかりません。 0は何を指定しますか？ 1は何を指定しますか？私はウェブで検索しましたが、理解できるものは何も見つかりませんでした。HTML5のaddColorStop（）メソッドのオフセットパラメータの理解
私は
グラデーションが別の色に1色からスムーズなシフトで答えることを試みます。
グラデーションを作成するときに、追加する開始点、終了点、および色を指定します。
以下の例では、（0,0）から（170,0）の線形グラデーションを作成するとします。
次にgrad.addColorStop(0,'#0000FF')は、最初から開始し、次の文がgrad.addColorStop(.2,'#00FF00')であれば開始します。最初の色はグラデーション幅の0.2％（170の0.2％）で終了し、次の色はグラデーション幅の0.2％から開始します。
addColorStopと言って、あなたは明示的に前の色の点を止めると言っています。
チェックこのexampleグラデーションは同じですが、形状の位置に基づいて色が異なります。 grad.addColorStopで
// Create Gradient
var grad=context.createLinearGradient(0,0,170,0);
// Start at 0 end at 0.2
grad.addColorStop(0,'#0000FF');
// Start at 0.2 end at 0.4
grad.addColorStop(.2,'#00FF00');
// Start at 0.4 end at 0.6
grad.addColorStop(.4,'#FFFF00');
// Start at 0.6 end at 0.8
grad.addColorStop(.6,'#FF8800');
// Start at 0.8 end at 0.9
grad.addColorStop(.8,'#FF0000');
//Start at 0.9 to rest all till end
grad.addColorStop(0.9,'white');
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var grad=context.createLinearGradient(0,0,170,0);
grad.addColorStop(0,'#0000FF');
grad.addColorStop(.2,'#00FF00');
grad.addColorStop(.4,'#FFFF00');
grad.addColorStop(.6,'#FF8800');
grad.addColorStop(.8,'#FF0000');
grad.addColorStop(0.9,'white');
grad.addColorStop(1,'blue');
context.fillStyle = grad;
context.fillRect(0,0,170,100);
context.strokeRect(0,0,170,100)
context.fillRect(80,200,300,100);
context.strokeRect(80,200,300,100)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
（）、最初のパラメータは何を意味するのでしょうか？ 0と1の間の数字、それは何を意味しますか？、私はその部分を取得しません。 – azemda
グラデーションから選択する部分を指定します。あなたが0、0.2,0.5と言う場合、それはグラデーションの0〜0.2％、グラデーションの0.2〜0.3％のように計算されます。グラデーションの幅が100であれば、グラデーションのどの色を選んでも0-20と仮定します。 – Sumeet