HTML5绘图canvas教程——绘制带阴影图像
使用canvas来绘制阴影。canvas中的2d上下文对象有几个属性是用来绘制阴影的，如shadowOffsetX,shadowOffsetY,shadowColor,shadowBlur等4个属性，当我们设置了这几个属性后再去绘制矩形或者其他图像的时候，就会出现阴影。效果如图
绘制带阴影图像
1、首先，获得canvas的上下文对象后（var context=drawing.getContext("2d");），设置阴影属性context.shadowOffsetX=5;context.shadowOffsetY=5;context.shadowBlur=5;context.shadowColor="rgba(0,0,0,0.5)";
2、context.shadowOffsetX=5;context.shadowOffsetY=5;表示阴影的偏移，shadowOffsetX表示X轴方向的偏移，shadowOffsetY表示Y轴方向的偏移
3、context.shadowBlur=5;表示模糊程度，设置为0则为不模糊。下图是0与5的效果对比
4、设置好阴影属性后，绘制你想要的图像，就会出现带阴影的图像了。如下绘制矩形的图像代码：context.fillRect(50, 50, 50, 50);//绘制矩形 context.fillStyle = "rgba(0,0,255,0.5)"; context.fillRect(30, 30, 50, 50); context.clearRect(60,60,10,10);//清除绘制矩形
5、再如下是绘制时钟的代码：context.beginPath(); context.ar罕铞泱殳c(300,泌驾台佐300,99,0,2*Math.PI,false); context.moveTo(392,300); context.arc(300,300,94,0,2*Math.PI,false); context.moveTo(300,300); context.lineTo(300,215); context.moveTo(300,300); context.lineTo(235,300) context.stroke();
6、最终demo源码给出来：<!DOCTYPE ><<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas</title></head><body><canvas id="drawing" width="800" height="800">绘图区域</canvas></body></html><script type="text/javascript"> var drawing=document.getElementById("drawing"); if (drawing.getContext) { var context=drawing.getContext("2d"); context.shadowOffsetX=5; context.shadowOffsetY=5; context.shadowBlur=5; context.shadowColor="rgba(0,0,0,0.5)"; context.fillStyle = "green";//填充样式演示 context.strokeStyle="red";//轮廓颜色 // context.strokeRect(50,50,50,50);//绘制矩形轮廓 context.fillRect(50, 50, 50, 50);//绘制矩形 context.fillStyle = "rgba(0,0,255,0.5)"; context.fillRect(30, 30, 50, 50); context.clearRect(60,60,10,10);//清除绘制矩形 context.beginPath(); context.arc(300,300,99,0,2*Math.PI,false); context.moveTo(392,300); context.arc(300,300,94,0,2*Math.PI,false); context.moveTo(300,300); context.lineTo(300,215); context.moveTo(300,300); context.lineTo(235,300) context.stroke(); };</script>
