ドロップシャドウ(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); |
シャドウをノックアウトするとか内側にとかは指定できなさそう、Shapeを重ね合わせて工夫するしか無いのかな。