FC2ブログ

Canvasでのグラデーション描画

Canvasでのグラデーション描画

Canvas 2D Context APIの種類は2つ

直線グラデーション

円形グラデーション

直線グラデーションは
上から下へだんどんと色が変わる

円形グラデーションは
内側から外側へ広がるように色が変わる


直線グラデーションの構文は
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へ代入

後は図形を作成して塗りつぶせばグラデーションが完了する

また、一度作成したグラデーションオブジェクトは
使い回しが可能
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック