实例讲解使用HTML5 Canvas绘制阴影效果的方法

context.fillRect(0, hh, canvas.width, canvas.height/4); for(var i = 0; i < 10; i++)

{ context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";

context.shadowOffsetX = i*2; context.shadowOffsetY = i*2;

context.shadowBlur = i*2; context.fillStyle = "RGBA(127, 127, 127, 1)";

context.fillText("Blur Canvas", 40, 80+hh); }

// section four - fade effect

var hh = canvas.height/4 + hh; context.fillStyle="green";

context.fillRect(0, hh, canvas.width, canvas.height/4); for(var i = 0; i < 10; i++)

{ context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";