html5 shadowblur,HTML5简明教程-1.1.3.HTML5Canvas参考手册 之 阴影shadowColor、shadowBlur、shadowOffsetX、shadowOffs...

转载请注明出处。

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相关属性比较简单，不再详细介绍，只把相关测试代码贴出如下：

测试代码如下：

Html5 Canvas shadow

//获得页面元素

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);

运行效果如下：

转载请注明出处。