JavaScript: canvas に描画した図形にグラデーションを適用

HTML5 Canvas API を使って、図形にグラデーション効果を適用できます。。

グラデーションには線形グラデーションと、円形グラデーションの2種類あり、 線形グラデーションには createLinerGradient() メソッドを使い、 円形グラデーションには createRadialGradient() メソッドを使います。

グラデーションで使用するメソッドの構文をまとめておきます。


// 線形グラデーション
createLinerGradient(x1, y1, x2, y2)

// 円形グラデーション
createRadialGradient(x1, y1, r1, x2, y2, r2)


// 色の定義
addColorStop(オフセット, 色)

サンプルを見ながら解説する方がわかりやすいと思いますので、さっそくサンプルを 表示します。

サンプルコード: 線形グラデーション

HTML・CSS


<canvas id="canvas"></canvas>

<style>
    canvas {
        border: 1px solid silver;
    }
</style>

JavaScript


var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
    
// 線形グラデーション
var g = c.createLinearGradient(20, 20, 280, 130);
// 色を定義
g.addColorStop(0, 'white');
g.addColorStop(0.6, 'gray');
g.addColorStop(1, 'black');
c.fillStyle = g;
c.fillRect(0, 0, 300, 150);

矩形に対して線形グラデーション効果を適用しています。

まず createLinearGradient() メソッドで CanvasGradient オブジェクトを生成し、 引数で始点・終点を設定しています。

createLinearGradient() メソッドの構文


createLinerGradient(x1, y1, x2, y2)

(x1, y1)が始点、(x2, y2)が終点となります。 サンプルでは始点を(20, 20) 、終点を(280, 130)としていますので、 左上から右下に向かってグラデーションが適用されます。

createLinearGradient() メソッドで定義できるのは始点・終点だけです。 色を定義するには、CanvasGradient オブジェクトのaddColorStop() メソッドを使用します。

addColorStop() メソッドの構文


addColorStop(オフセット, 色)

オフセットは、色を変化させる位置を「0.0 ~ 1.0」の数値で表します。 0.0 が始点を意味し、1.0 が終点を意味します。

g.addColorStop(0, 'white');
g.addColorStop(0.6, 'gray');
g.addColorStop(1, 'black');

上記コードでは、始点の色を'white'、中間より少し右下の 0.6 の位置の色を'gray'、 終点の色を'black' にしています。色はRGBで'#fff'のように表しても、もちろん大丈夫です。

設定したCanvasGradient オブジェクトを fillStyle プロパティに指定し、 最後に fillRect() メソッドで矩形を描画すると、グラデーションが適用されます。

サンプルコード: 円形グラデーション

HTML・CSS は省略します。

JavaScript


var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

// 円形グラデーション
var g = c.createRadialGradient(150, 75, 5, 150, 75, 65);

// 色
g.addColorStop(0, 'white');
g.addColorStop(0.6, 'gray');
g.addColorStop(1, 'black');
c.fillStyle = g;

// 円
c.beginPath();
c.arc(150, 75, 70, 0, 2 * Math.PI, false);
// 描画
c.fill();

今回のサンプルは円に対して円形グラデーション効果を適用しています。

まず createRadialGradient() メソッドで CanvasGradient オブジェクトを生成し、 引数で開始円・終了円を設定しています。

createRadialGradient() メソッドの構文


createRadialGradient(x1, y1, r1, x2, y2, r2)

(x1, y1, r1)が開始円、(x2, y2, r2)が終了円となります。 サンプルでは開始円を(150, 75, 5) 、終了円を(150, 75, 65)としています。

createRadialGradient() メソッドで定義できるのは開始円・終了円だけです。 色を定義するには、CanvasGradient オブジェクトのaddColorStop() メソッドを使用します。

addColorStop() メソッドの構文・説明については1つめのサンプルで記述しています。


g.addColorStop(0, 'white');
g.addColorStop(0.6, 'gray');
g.addColorStop(1, 'black');

上記コードで開始円の色を'white'、真ん中より少し外側の 0.6 の色を'gray'、終了円の色を'black'としています。

設定したCanvasGradient オブジェクトを fillStyle プロパティに指定し、 beginPath()、arc()、fill() メソッドで円を描画するとグラデーションが適用されます。

JavaScript入門