用html制作阴影效果,使用HTML5 Canvas绘制阴影效果的方法

这篇文章主要介绍了使用HTML5 Canvas绘制阴影效果的方法,包括一个3D拉影 边缘模糊效果文字的编写例子,在阴影效果的利用上进一步深入,需要的朋友可以参考下

创建阴影效果需要操作以下4个属性：

1.context.shadowColor：阴影颜色。

2.context.shadowOffsetX：阴影x轴位移。正值向右，负值向左。

3.context.shadowOffsetY：阴影y轴位移。正值向下，负值向上。

4.context.shadowBlur：阴影模糊滤镜。数据越大，扩散程度越大。

这四个属性只要设置了第一个和剩下三个中的任意一个就有阴影效果。不过通常情况下，四个属性都要设置。

例如，创建一个向右下方位移各5px的红色阴影，模糊2px，可以这样写。context.shadowColor = "red";

context.shadowOffsetX = 5;

context.shadowOffsetY = 5;

context.shadowBlur= 2;

需要注意的是，这里的阴影同其他属性设置一样，都是基于状态的设置。因此，如果只想为某一个对象应用阴影而不是全局阴影，需要在下次绘制前重置阴影的这四个属性。

运行结果：

阴影文字：