研究成果

注意事项

解决方案

计算方法

发展趋势

中国古代

社会主义

心理健康

控制系统

经济发展

建筑工程

传统文化

民事诉讼

中国传统

程序设计

解决方法

轨道交通

工程施工

研究结果

建设工程

文史资料

持续发展

计算机网

使用方法

› 首页 › 理论教育 ›如何为图形添加阴影：实用教程

如何为图形添加阴影：实用教程

时间：2023-06-03 理论教育 版权反馈
【摘要】：添加阴影效果时，只需利用图形上下文对象的几个关于阴影绘制的属性就可以了，如下所示：①shadowOffsetX：阴影的横向位移量；②shadowOffsetY：阴影的纵向位移量；③shadowBlur：阴影的模糊范围；④shadowColor：阴影的颜色。shadowOffsetX和shadowOffsetY用来设定阴影在x和y轴的延伸距离，它们是不受变换矩阵所影响的。shadowBlur用于设定阴影的模糊程度，它表示图形阴影边缘的模糊范围。下面绘制带阴影效果的文字，代码如下：网页显示效果如图8.20所示。图8.20给图形绘制阴影

如何为图形添加阴影：实用教程

在HTML5中，使用canvas元素可以给图形添加阴影效果。添加阴影效果时，只需利用图形上下文对象的几个关于阴影绘制的属性就可以了，如下所示：

①shadowOffsetX：阴影的横向位移量；

②shadowOffsetY：阴影的纵向位移量；

③shadowBlur：阴影的模糊范围；

④shadowColor：阴影的颜色。

shadowOffsetX和shadowOffsetY用来设定阴影在x和y轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示它会往下或右延伸，它们的默认值都是0。(www.xing528.com)

shadowBlur用于设定阴影的模糊程度，它表示图形阴影边缘的模糊范围。如果不希望阴影的边缘太清晰，需要将阴影的边缘模糊化时可以使用该属性。设定该属性值时必须要设定为比0大的数字，否则它将被忽略。一般设定在0至10之间，开发时可以根据情况调整这个数值，以达到满意效果。shadowColor用于设定阴影效果的延伸，其值可以是标准的CSS颜色值，默认值是全透明的黑色。

下面绘制带阴影效果的文字，代码如下：

</html>

网页显示效果如图8.20所示。

图8.20　给图形绘制阴影

免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。

我要反馈

有关移动商务网页设计与制作（第2版）的文章

相关推荐