绘制带阴影效果的图形
在canvas上绘制带阴影效果的图形只需设置shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor属性。
shadowOffsetX,shadowOffsetY表示阴影的x,y偏移量单位像素;可以使用负值,正负偏移方向不同。
shadowBlur设置阴影模糊程度,值越大,阴影越模糊,效果与Photoshop的高斯模糊滤镜相同;shadowColor设置阴影颜色。
1 <h3>绘制阴影效果</h3> 2 <canvas id="canvas6" style="border:1px solid blue;"> 3 Your browser does not support the canvas element. 4 </canvas> 5 6 <script type="text/javascript"> 7 var c=document.getElementById('canvas6'); 8 9 if(c&&c.getContext){ 10 var context=c.getContext("2d"); 11 context.shadowOffsetX=15; 12 context.shadowOffsetY=15; 13 context.shadowBlur=10; 14 context.shadowColor='rgba(255,0,0,0.5)'; 15 context.fillStyle="#f00"; 16 context.fillRect(10,10,60,60); 17 } 18 </script>
效果如下:
2016-07-14