libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

Canvasによるグラフィック描画(2) (5/7)

作成:2010-07-15 21:08
更新:2010-07-15 21:08

■図形に影をつける

Canvasに用意されている、ちょっと面白い描画機能に「影の描画」があります。これは、描く図形に影を自動的に付けて描画をするものです。これは、影に関する以下のプロパティを設定するだけで利用できるようになります。

shadowOffsetX ――影の横方向のオフセット（どれだけずらして描くか）
shadowOffsetY ――影の縦方向のオフセット
shadowColor ――影の色
shadowBlur ――影のぼかし

shadowOffsetX/Yで影の描かれる方向を指定し、shadowColorで色を指定すれば、それだけで影が表示されます。shadowBlurはオプション機能といってよいでしょう。あまりシャープな影でなく、ぼんやりとした輪郭にしたい場合には、これに実数の値を指定します。だいたい０～10ぐらいの範囲でいろいろと調整すると、どのぐらいぼかしがかかるかわかってくるでしょう。

下に、簡単なサンプルを上げておきましょう。translateを使い、五芒星を移動しながら描画しています。それぞれの図形に、影が描かれていることがよくわかるでしょう。

影の設定は、コンテキストのプロパティとして用意されていますから、パスとは無関係に設定されます。一度設定してしまえば、それ以後、描く図形全てに影がつけられるようになるわけです。

では、途中で影を消したいときは？　実は、影はプロパティを設定していなくとも、常に描かれています。デフォルトでは、shadowColorに「透明な黒」が設定されているため、影が見えないだけなのです。従って、shadowColorに'rgba(0,0,0,0)'を設定すれば、それ以後、影はまた描かれなくなる（単に見えない影になる？）わけです。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

*program list*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function draw(id) {
    var canvas = document.getElementById(id);
    if (canvas == null)
        return false;
 
    var context = canvas.getContext('2d');
    context.fillStyle = "#EEEEFF";
    context.fillRect(0, 0, 400, 300);
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
    context.shadowColor = 'rgba(100,100,100,0.5)';
    context.shadowBlur = 7.5;
    // 描画
    context.translate(0,50);
    for(var i = 0;i < 3;i++){
        context.translate(100,50);
        create5Star(context);
        context.fill();
    }
}
 
function create5Star(context){
    var n = 0;
    var dx = 0;
    var dy = 0;
    var s = 50;
    // 図形の作成
    context.beginPath();
    context.fillStyle = 'rgba(255,0,0,0.75)';
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig = Math.PI / 5 * 4;
    for(var i = 0; i < 5; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.lineTo( dx + x * s,dy + y * s);
    }  
    context.closePath();
}
※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る