JavaScript入門[HTML5編]グラデーション指定

グラデーション指定の命令文

グラデーションで塗り潰すための命令文は３種類あります。 まずはグラデーション領域を指定する命令２つを見てみましょう。

変数cgobj = content.createLinearGradient(X1,Y1,X2,Y2)

座標(X1,Y1)から座標(X2,Y2)の範囲に線形のグラデーションを描画します。

変数cgobj = content.createRadialGradient(X1,Y2,R1,X2,Y2,R2)

座標(X1,Y1)半径R1ピクセルから、座標(X2,Y2)を中心に半径R2ピクセルの円形グラデーションを描画します。

左辺の変数にはグラデーション領域が代入されます（CanvasGradientオブジェクト呼ばれます）。 この領域にグラデーションの色と配分を指定する命令が、addColorStop()です。

変数cgobj.addColorStop(配分,色)

グラデーションの色と配分を指定します。

この配分と色を指定した変数(CanvasGradientオブジェクト)を、fillStyleに指定してから描画します。

線形のグラデーションを描く

ではcanvasにグラデーションを描画する方法を見てみましょう。

<canvas id="cv" width="360" height="240"></canvas>

<script>
var ctx = document.getElementById("cv").getContext("2d");

//線形グラデーション領域の指定
var grd = ctx.createLinearGradient(0,0,360,240);

//グラデーションの色と配分を指定（青→水色→灰色に）
grd.addColorStop(0,"blue");
grd.addColorStop(0.5,"aqua");
grd.addColorStop(1,"gray");

//fillStyleにグラデーション配色を指定し、矩形で塗り潰す
ctx.fillStyle = grd;
ctx.fillRect(0,0,360,240);
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

斜めにグラデーションが描画されたと思います。 領域指定の終点の座標を(360,0)もしくは(0,240)に変更してみて下さい。 それぞれ横グラデーション、縦グラデーションとなります。

円形グラデーションを描く

続いて円形グラデーションを描く方法を見ていきましょう。

<canvas id="cv2" width="360" height="240"></canvas>

<script>
var ctx2 = document.getElementById("cv2").getContext("2d");

//円形グラデーション領域の指定
var grd2 = ctx2.createRadialGradient(180,120,10,180,120,180);

//グラデーションの色と配分を指定（青→水色→灰色に）
grd2.addColorStop(0,"blue");
grd2.addColorStop(0.5,"aqua");
grd2.addColorStop(1,"gray");

//fillStyleにグラデーション配色を指定し、矩形で塗り潰す
ctx2.fillStyle = grd2;
ctx2.fillRect(0,0,360,240);
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

座標(180,120)で半径10ピクセルの円から、 同じ座標で半径180ピクセルの円の範囲にグラデーション指定をしています。