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拉影效果的基础上在四个方向重复，就得到了边缘羽化的文字效果。运行效果：序号：
复制代码
代码如下：
<！DOCTYPEhtml><html><head><metahttp-equiv=“X-UA-Compatible”content=“chrome=IE8”><metahttp-equiv=“Content-type”content=“text/html;charset=UTF-8“><title>画布剪辑演示</title><linkhref=”default.css“rel=”stylesheet“/><script>varctx=null;//全局变量2d上下文varimageTexture=null;window.onload=function（）{varcanvas=document.getElementById（“text_canvas”）;console.log（canvas.parentNode.clientWidth）;canvas.width=canvas.parentNode.clientWidth;canvas.height=canvas.parentNode.clientHeight;如果（！
返回;}varcontext=canvas.getContext（'2d'）;//第一部分-阴影和模糊context.fillStyle=“black”;context.fillRect（0，0，canvas.width，canvas.height/4）;context.font='60ptCalibri';context.shadowColor=“白色”;context.shadowOffsetX=0;context.shadowOffsetY=0;context.shadowBlur=20;context.fillText（“模糊画布”，40，80）;context.strokeStyle=“RGBA（0，255，0，1）”;context.lineWidth=2;context.strokeText（“模糊画布”，40，80）;//第二部分-阴影字体varhh=canvas.height/4;context.fillStyle=“white”;context.fillRect（0，hh，canvas。
context.font='60ptCalibri';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.fillText（“模糊画布”，40，80+hh）;//第三部分-阴影效果varhh=canvas.height/4+hh;context.fillStyle=“black”;context.fillRect（0，hh，canvas.width，canvas.height/4）;for（vari=0;i<10;i++）{context.shadowColor=“RGBA（255，255，255，”+（（10-i）/10）+“）”;context.shadowOffsetX=i*2;context.shadowOffsetY=i*2;context.shadowBlur=i*2;上下文。
context.fillText（“模糊画布”，40，80+hh）;}//第四部分-淡入淡出效果varhh=canvas.height/4+hh;context.fillStyle=“green”;context.fillRect（0，hh，canvas.width，canvas.height/4）;for（vari=0;i<10;i++）{context.shadowColor=“RGBA（255，255，255，”+（（10-i）/10）+“）”;context.shadowOffsetX=0;context.shadowOffsetY=-i*2;context.shadowBlur=i*2;context.fillStyle=“RGBA（127，127，127，1）”;context.fillText（“模糊画布”，40，80+hh）;}for（vari=0;i<10;i++）{context.shadowColor=“RGBA（255，255，255，”+（（10-i）/10）+“）”;
context.shadowOffsetY=i*2;context.shadowBlur=i*2;context.fillStyle=“RGBA（127，127，127，1）”;context.fillText（“模糊画布”，40，80+hh）;}for（vari=0;i<10;i++）{context.shadowColor=“RGBA（255，255，255，”+（（10-i）/10）+“）”;context.shadowOffsetX=i*2;context.shadowOffsetY=0;context.shadowBlur=i*2;context.fillStyle=“RGBA（127，127，127，1）”;context.fillText（“模糊画布”，40，80+hh）;}for（vari=0;i<10;i++）{context.shadowColor=“RGBA（255，255，255，”+（（10-i）/10）+“）”;context.shadowOffsetX=-i*2;上下文。shadowOffsetY=0;context.shadowBlur=i*2;
context.fillStyle=“RGBA（127，127，127，1）”;context.fillText（“模糊画布”，40，80+hh）;}}</script></head><body><h1>HTML5画布剪辑演示-通过GloomyFish</h1><pre>填充和描边剪辑</pre><divid=“my_painter”><canvasid=“text_canvas”></canvas></div></body></html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60716.shtml
