Canvasでのグラデーション描画
Canvas 2D Context APIの種類は２つ
直線グラデーション
と
円形グラデーション
直線グラデーションは
上から下へだんどんと色が変わる
円形グラデーションは
内側から外側へ広がるように色が変わる
直線グラデーションの構文は
createLinearGradient(
始まりのx座標,
始まりのy座標,
終わりのx座標,
終わりのy座標
)
円形グラデーションの構文は
createRadialGradient(
内側の円のx座標,
内側の円のy座標,
内側の円の半径
外側の円のx座標,
外側の円のy座標,
外側の円の半径
)
となる
円形グラデーションは内側の円から
外側の円へ向かうので
内側が始まり、外側が終わりと考えるとわかりやすい
また
canvas手は、グラデーションは塗り扱いなので
fillStyleプロパティへグラデーションを指定する
ただし、直接色の指定はできないため
グラデーションオブジェクトを設定する
このグラデーションオブジェクトを生成するのが
createLinearGradient()
や
createRadialGradient()
になる
グラデーションにするには、いくつか色の指定が必要
この色を設定するのが
addColorStop()
addColorStop()のパラメータは
位置と色
つまり
addColorStop(位置,色)
となる
位置は、0~1.0で指定
0は開始位置
1.0が終了位置
もし、半分なら0.5になる
色は、redとこのCSSて指定するときと同じ
もし、白から黄色、赤へ変わるように設定するなら
gradObj.addColorStop(0,”white”);
gradObj.addColorStop(0.5,”yellow”);
gradObj.addColorStop(“red”);
となる
設定が、できたら
グラデーションオブジェクトをfillStyleへ代入
後は図形を作成して塗りつぶせばグラデーションが完了する
また、一度作成したグラデーションオブジェクトは
使い回しが可能