読者です 読者をやめる 読者になる 読者になる

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Canvasの基本 グラデーションの設定

線や面の色を指定する際に、グラデーションを指定することができます。グラデーションはCanvasGradientオブジェクトで行います。

線形グラデーション

createLinearGradient ( startX, startY, endX, endY )

createLinearGradientは線形のグラデーションを扱うCanvasGradientオブジェクトを作成します。 引数は左から順に、グラデーション開始位置のx座標、y座標、終了位置のx座標、y座標です。

円形グラデーション

createRadialGradient ( startX, startY, startRadius, endX, endY, endRadius )
円形グラデーションは、2重の円の間の色が放射状にグラデーションになります。実装はcreateRadialGradientメソッドで行います。 引数は左から順に開始円の座標x、y、半径、修了円の座標x、y、半径になります。

色の指定

addColorStop ( changePoint, colorStyle )

addColorStopメソッドは、グラデーション開始位置から終了位置の間のポイントを指定して、その部分が何色になるかを指定します。 第一引数に0~1の値で色を変えるポイントの位置を指定します。
グラデーション開始位置を黒にする場合はaddColorStop(0, '#000');とします。

以下のサンプルは、開始位置が赤で、真ん中で緑に変わり、最後に青くなるグラデーションを指定しています。

var context = document.getElementById('canvas').getContext('2d');
// CanvasGradientオブジェクトを作成
var lg = context.createLinearGradient(0, 0, 500, 0);

// グラデーションの設定
lg.addColorStop(0, '#ff0000');   // 開始位置は赤
lg.addColorStop(0.5, '#00ff00'); // ちょうど真ん中で緑になる
lg.addColorStop(1, '#0000ff');   // 最後に青になる

// 色のプロパティにCanvasGradientオブジェクトを渡す
context.fillStyle = lg;
context.fillRect(0, 0, 500, 300);