canvasで画像にドロップシャドウをつける方法
canvasタグで画像に影をつける方法を紹介します。
やり方はとても簡単。canvasのコンテキストを取得した後、shadowBlur（ぼかしの範囲）とshadowColor（影の色）を指定し、普通に画像を載せるだけです。例えば、下のコードのような感じ。
var canvas = getElementsByTagName('canvas');
var ctx = canvas.getContext('2d');
ctx.shadowBlur = 10; //ぼかしの範囲を指定。
ctx.shadowColor = "#000000"; //影の色を指定。
var img = new Image();
img.src = "画像のURL";
img.onload = function(){
ctx.drawImage(img,10,10);
};他にも、fillRectなどでつくる図形にも影が付く模様。ただし、lineToで引いた直線にはつかないようです。
jsdo.itで試してみたのがこちら。
