つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録~canvasによる図形の装飾

 今回はcanvasjavascriptを用いて図形を装飾する方法について紹介する。

atatat.hatenablog.com

1. 透明度の指定

 図形を塗りつぶすときの透明度を指定して、着色することができる。透明度を指定するにはglobalAlphaを用い、0~1の範囲で指定し0が透明で1が不透明となる。 以下のコードはglobalAlpha=0.5として半透明に設定したのちに、通常の図形塗りつぶしを行っている。

<canvas width="300" height="150" id="canv_dec1" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_dec1');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
 context.globalAlpha = 0.5;
    context.fillStyle = "blue";
    context.fillRect(20,20,80,80);
    context.fillStyle = "red";
    context.fillRect(60,60,80,80);   

    context.stroke();
}
</script>

以下の実行結果のように四角形は半透明になってキャンバスや図形同士が重ね合わさっていることがわかる。

2. グラデーションで塗りつぶす

グラデーションを指定するにはいくつかのステップにわけて設定する。最初にbeginPath();でパスを初期化したあと、createLinearGradient(x0,y0,x1,y1);を用いて線形グラデーションを設定する。 (x0,y0)を線形グラデーションの開始点、(x1,y1)を終了点として設定することができる。開始点と終了点の位置関係によって線形グラデーションのグラデーション範囲と方位が決定される。 次にaddColorStop(offset,"color");を用いてグラデーションの色を設定する。offsetはグラデーションの位置を示し、0が開始点で1が終了点を示す。colorはカラー名、カラーコード、rgb関数いずれでも指定できる。今回のコード例では敢えてすべての方法で色を指定している。グラデーションの設定が完了したらfillStyle=gradientとして図形の塗りつぶしを実行するとグラデーションで装飾される。

<canvas width="300" height="150" id="canv_dec2" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_dec2');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.beginPath();
    var gradient = context.createLinearGradient(20,20,100,100);//線形グラデーション
    gradient.addColorStop(0.0 , "red");
    gradient.addColorStop(0.5 , "#78FF94");
    gradient.addColorStop(1.0 , 'rgb(0,0,255)');
    context.fillStyle = gradient;
    context.fillRect(20,20,80,80);   
    
}
</script>

線形でなく放射状(円形)のグラデーションを指定する場合はcreateRadialGradient(x0,y0,r0,x1,y1,r1)を用いて放射状に広がるグラデーションを設定する。 (x0,y0,r0)はグラデーションの開始座標(x0,y0),開始円の半径r0を指定する。また、(x1,y1,r1)はグラデーションの終了座標(x1,y1),終了円の半径r1を指定する。 グラデーションの色については、線形グラデーションの時と同様にaddColorStop(offset,"color");を用いる。

<canvas width="300" height="150" id="canv_dec3" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_dec3');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.beginPath();
    var gradient = context.createRadialGradient(150,75,5,150,75,50);//放射状のグラデーション
    gradient.addColorStop(0.0 , "red");
    gradient.addColorStop(0.5 , "#78FF94");
    gradient.addColorStop(1.0 , 'rgb(0,0,255)');
    context.fillStyle = gradient;
    context.arc(150,75,50,0,2*Math.PI);//円を描画
    context.fill(); 
    
}
</script>

3. 影を加える

 影を加えるには影の色、ずらし量(X/Y)、影のぼけ量を設定する。それぞれshadowColor, shadowOffsetX, shadowOffsetY, shadowBlurを設定することで図形に影を加えることができる。

<canvas width="300" height="150" id="canv_dec4" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_dec4');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.shadowColor = "red"; //影の色を赤
    context.shadowOffsetX = 5; //影のずらし量(X)
    context.shadowOffsetY = 5; //影のずらし量(Y)
    context.shadowBlur = 5; //影のぼけ量
    context.fillStyle = "blue";
    context.fillRect(20,20,80,80);   
    context.arc(180,75,50,0,2*Math.PI);
    context.fill(); 

}
</script>

4. まとめ

 今回はcanvasjavascriptを用いて図形を装飾する方法として、塗りつぶしの透明度、グラデーション、影の追加する方法について紹介した。