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

 绘制带阴影效果的图形

在canvas上绘制带阴影效果的图形只需设置shadowOffsetX，shadowOffsetY，shadowBlur，shadowColor属性。

shadowOffsetX，shadowOffsetY表示阴影的x,y偏移量单位像素；可以使用负值，正负偏移方向不同。
shadowBlur设置阴影模糊程度，值越大，阴影越模糊，效果与Photoshop的高斯模糊滤镜相同；shadowColor设置阴影颜色。

<h3>绘制阴影效果</h3>
<canvas id="canvas6" style="border:1px solid blue;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
var c=document.getElementById('canvas6');

if(c&&c.getContext){
    var context=c.getContext("2d");
    context.shadowOffsetX=15;
    context.shadowOffsetY=15;
    context.shadowBlur=10;
    context.shadowColor='rgba(255,0,0,0.5)';
    context.fillStyle="#f00";
    context.fillRect(10,10,60,60);
}
</script>

 

 效果如下：

 2016-07-14