html5阴影在线,HTML5 Canvas阴影使用方法实例演示

HTML5Canvas中提供了设置阴影的四个属性值的分别为：context.shadowColor=“红色”表示设置阴影颜色为红色context.shadowOffsetX=0表示阴影相对文本的水平距离，0表示其中水平位置重合上下文。shadowOffsetY=0表示阴影相对文本的垂直距离，0表示该垂直位置重合的context.shadowBlur=10阴影模糊效果，值看上去模糊越厉害。一个最简单的带有阴影的矩形代码如下：context.shadowColor=“RGBA(127,127,127,1)”;context.shadowOffsetX=3;context.shadowOffsetY=3;context.shadowBlur=0;context.fillStyle=“RGBA(0，0，0，0.8)”;context.fillRect(10，HH+10，200，canvas.height/4-20);效果如下：阴影文字：只要设置shadowOffsetX与shadowOffsetY的值，当值都正数时，相对阴影文字的右下方偏移当值都为负数时，阴影相对文字的左上方偏移。3D拉影效果：在同一位置不断的重复绘制文字同时改变shadowOffsetX，shadowOffsetY，shadowBlur

的值，从小到大不断改变不断增加，长度也不断增加。就得到了拉影效果文字。边缘模糊效果文字：在3D拉影效果的基础上在四个方向重复，就得到了边缘羽化的文字效果。运行效果：序号：

复制代码

代码如下：

画布剪辑演示

HTML5画布剪辑演示-通过GloomyFish

填充和描边剪辑