首页 > 代码库 > HTML5简明教程-1.1.1.HTML5Canvas参考手册 之 阴影shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY

HTML5简明教程-1.1.1.HTML5Canvas参考手册 之 阴影shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY

原文链接: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

转载请注明出处。



HTML5简明教程-1.1.1.HTML5Canvas参考手册 之 阴影shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY