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