HTML5学习笔记-绘制变形图形之绘制带阴影图形

 绘制带阴影效果的图形

在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