您当前的位置: 原文链接：http://blog.csdn.net/tomorrow13210073213/article/details/42386597
转载请注明出处。
HTML5的画布给我们提供了绘制元素阴影的功能，主要的属性包括如下几个：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。其中shadowColor定义阴影颜色样式，shadowBlur定义阴影模糊系数，shadowOffsetX定义阴影X轴偏移量，shadowOffsetY定义阴影Y轴偏移量。
由于我们上面提到的几个canvas属性都与阴影相关，不在单独介绍，在此统一讲解。
属性一：shadowColor
属性名：shadowColor
属性描述：shadowColor 属性设置或返回用于阴影的颜色。
属性默认值：#000000
属性值：颜色值。只能用颜色值（颜色单词，#000000，rgba）定义。
js语法：context.shadowColor=color;
注意：定义shadowColor后，至少需要用shadowBlur定义阴影模糊系数，否则将看不到阴影效果。
属性二：shadowBlur
属性名：shadowBlur
属性描述：shadowBlur 属性设置或返回阴影的模糊系数。
属性默认值：0，没有模糊
属性值：数字。
js语法：context.shadowBlur=number;
注意：如前文所说，定义shadowColor后，至少需要用shadowBlur定义阴影模糊系数，否则将看不到阴影效果。
属性三：shadowOffsetX
属性名：shadowOffsetX
属性描述：shadowOffsetX 属性设置或返回形状与阴影的水平距离,或称X轴偏移量。
属性默认值：0，阴影不偏移，位于元素正下方
属性值：数字。
js语法：context.shadowOffsetX=number;
参数值：number默认0（不偏移，位于元素正下方），正数（向X轴正方向偏移），负数（向X轴负方向偏移）。
属性四：shadowOffsetY
属性名：shadowOffsetY
属性描述：shadowOffsetY 属性设置或返回形状与阴影的垂直距离,或称Y轴偏移量。
属性默认值：0，阴影不偏移，位于元素正下方
属性值：数字。
js语法：context.shadowOffsetY=number;
参数值：number默认0（不偏移，位于元素正下方），正数（向Y轴正方向偏移），负数（向Y轴负方向偏移）。
shadow相关属性比较简单，不再详细介绍，只把相关测试代码贴出如下：
测试代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html5 Canvas shadow</title>
</head>
<body>
<!--
-->
<canvas id="can" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
//获得页面元素
var c = document.getElementById('can');
//调用html5相关方法获得2D对象
var cC = c.getContext('2d');
//设置绘制文字大小及字体
cC.font = "30px Verdana";
//定义线性渐变
var lg = cC.createLinearGradient(0, 0, 200, 0);
lg.addColorStop("0", "magenta");
lg.addColorStop("0.5", "blue");
lg.addColorStop("1.0", "red");
//设置阴影模糊系数（单位：像素）
cC.shadowBlur = 10;
//设置阴影颜色
cC.shadowColor = 'black';
//设置阴影X轴偏移量（单位：像素）
cC.shadowOffsetX = 5;
//设置阴影X轴偏移量（单位：像素）
cC.shadowOffsetY = 5;
//将渐变设定为笔触
cC.strokeStyle = lg;
//设定绘制文字
cC.strokeText("Merry Christmas !", 20, 50);
//设置阴影模糊系数（单位：像素）
cC.shadowBlur = 20;
//用rgba设置阴影颜色，支持透明度
cC.shadowColor = 'rgba(0,0,0,0.8)';
//设置阴影X轴偏移量（单位：像素）
cC.shadowOffsetX = 5;
//设置阴影Y轴偏移量（单位：像素）
cC.shadowOffsetY = 5;
//设置笔触颜色
cC.strokeStyle = '#3f3f42';
//绘制矩形线框
cC.strokeRect(20, 70, 100, 50);
//设置阴影模糊系数（单位：像素）
cC.shadowBlur = 10;
//设置阴影颜色
cC.shadowColor = 'black';
//设置阴影X轴偏移量（单位：像素）
cC.shadowOffsetX = -5;
//设置阴影X轴偏移量（单位：像素）
cC.shadowOffsetY = -5;
cC.fillStyle = '#3f3f47';
cC.fillRect(20, 150, 100, 50);
</script>
</html>运行效果如下：
原文链接：http://blog.csdn.net/tomorrow13210073213/article/details/42386597
转载请注明出处。