canvasでグラデーションを指定する方法を解説

HOME
更新日:2013.12.03
HOMEJavaScript入門(HTML5編) > グラデーション指定

グラデーション指定-JavaScript入門(HTML5編)

このページでは、グラデーションで塗り潰す方法について見ていきます。 線形によるグラデーションと、円形によるグラデーションを指定できます。

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

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

変数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ピクセルの円の範囲にグラデーション指定をしています。