陰影在計算上是昂貴的 - 快取陰影

警告！ 謹慎地塗抹陰影！

如果在動畫迴圈中應用陰影，則應用陰影是昂貴的並且是倍增的。

相反，快取影象（或其他圖形）的陰影版本：

• 在應用程式開始時，在第二個僅限記憶體的 Canvas 中建立一個陰影版本的影象：var memoryCanvas = document.createElement('canvas') ...

• 每當你需要陰影版本時，將預先陰影的影象從記憶體中的畫布繪製到可見的畫布：context.drawImage(memoryCanvas,x,y)

var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
canvas.style.border='1px solid red;';
document.body.appendChild(canvas);

// Always(!) use "img.onload" to give your image time to 
//     fully load before you try drawing it to the Canvas!
var img=new Image();
img.onload=start;
// Put your own img.src here
img.src="http://i.stack.imgur.com/hYFNe.png";
function start(){
    ctx.drawImage(img,0,20);
    var cached=cacheShadowedImage(img,'black',5,3,3);
    for(var i=0;i<5;i++){ 
        ctx.drawImage(cached,i*(img.width+10),80);
    }
}

function cacheShadowedImage(img,shadowcolor,blur){
    var c=document.createElement('canvas');
    var cctx=c.getContext('2d');
    c.width=img.width+blur*2+2;
    c.height=img.height+blur*2+2;
    cctx.shadowColor=shadowcolor;
    cctx.shadowBlur=blur;
    cctx.drawImage(img,blur+1,blur+1);
    return(c);
}