Html5 Canvas 予備学習メモ (9) - グラデーション

今回は引き続きhtml5の描画効果を紹介します。 この記事で紹介するグラデーションは、以前紹介したfillStyleの値です。まず例を見てみましょう:

コードは次のとおりです:

var gradient = context.createLinearGradient(50,50,150,150);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

まず、createLinearGradientを通じて線形グラデーションを作成します。 4つのパラメータは始点の水平方向の座標と終点の水平方向と垂直方向の座標であり、その 2 つの点に色の値を加算すると、addColorStop の 0 が始点、1は終点、2番目のパラメータは色で、rgbもrgbaにすることができます。

前のものは線形グラデーションで、円弧グラデーションがあります。効果は次のとおりです:

コードは次のとおりです:

var gradient = context.createRadialGradient(50,50,5,150,150,10);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

createRadialGradient 最初の 3 つのパラメーターは次のとおりです。開始円の中心の水平座標と垂直座標、円の半径。最後の 3 つのパラメーターは次のとおりです: 終点円の中心座標と円の半径。

円形グラデーションを使用して、中心から始まるグラデーションを描画します。効果は次のとおりです:

コードは次のとおりです。