イナヅマTVログ

Canvas始めました – ドロップシャドウしてみた

| 0件のコメント

ドロップシャドウ(Drop shadow)をしてみるの巻。

ドロップシャドウに用意されている関数とプロパティ。
関数
shadowColor(color:String)
プロパティ
shadowOffsetX:int 横方向のオフセット値
shadowOffsetY:int 縦方向のオフセット値
shadowBlur:int ブラー(ぼかし)

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.fillStyle = "#ff0000";
 
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 16;
context.shadowColor = 'rgba(16,16,16,0.8)';
 
context.font = "90px serif";
context.baseline = "top";
context.fillText('Hello world', 10, 90);
 
context.fillStyle = 'red';
context.fillRect(550,10,50,50);
 
context.fillStyle = 'rgba(0,255,0,0.5)';
context.fillRect(620,10,50,50);

Canvas Drop shadow

シャドウをノックアウトするとか内側にとかは指定できなさそう、Shapeを重ね合わせて工夫するしか無いのかな。

コメントを残す