创建阴影效果需要操作以下4个属性：
1.context.shadowcolor：阴影颜色。
2.context.shadowofftx：阴影x轴位移。正值向右，负值向左。
3.context.shadowoffty：阴影y轴位移。正值向下，负值向上。
4.context.shadowblur：阴影模糊滤镜。数据越大，扩散程度越大。
这四个属性只要设置了第一个和剩下三个中的任意一个就有阴影效果。不过通常情况下，四个属性都要设置。
例如，创建一个向右下方位移各5px的红色阴影，模糊2px，可以这样写。
javascript code
复制内容到剪贴板
context.shadowcolor=“red”; context.shadowofftx=5; context.shadowoffty=5; context.shadowblur=2;需要注意的是，这里的阴影同其他属性设置一样，都是基于状态的设置。因此，如果只想为某一个对象应用阴影而不是全局阴影，需要在下次绘制前重置阴影的这四个属性。
运行结果：
阴影文字：
只要设置shadowofftx与shadowoffty的值，当值都正数时，阴影相对文字的右下
方偏移。当值都为负数时，阴影相对文字的左上方偏移。
3d拉影效果：
在同一位置不断的重复绘制文字同时改变shadowofftx、shadowoffty、shadowblur
的值，从小到大不断偏移不断增加，透明度也不断增加。就得到了拉影效果文字。
边缘模糊效果文字：
在3d拉影效果的基础上在四个方向重复，就得到了边缘羽化的文字效果。
运行效果：
程序代码：
javascript code
复制内容到剪贴板
<!doctypehtml> <html> <head> <metahttp-equiv=“x-ua-compatible”content=“chrome=ie8”> 中国近代史读后感<metahttp-equiv=“content-type”content=“text/html;chart=utf-8”> <title>canvasclipdemo</title> <linkhref=“default.css̶事与愿违的反义词1;rel=“stylesheet”/> <script> varctx=null;//globalvariable2dcontext 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; if(!canvas.getcontext){ console.log(“canvasnotsupported.pleainstallahtml5compatiblebrowr.”); return; } varcontext=canvas.getcontext(‘2d’); //ctionone–shadowandblur context.fillstyle=“black”; context.fillrect(0,0,canvas.width,canvas.height/4); context.font=’60ptcalibri’; context.shadowcolor=“white”; context.shadowofftx=0; context.shadowoffty=0; context.shadowblur=20; context.filltext(“blurcanvas”,40,80); context.strokestyle=“rgba(0,255,0,1)”; context.linewidth=2法制在我心中; context.stroketext(“blurcanvas”,40,80); //ctiontwo–shadowfont varhh=canvas.height/4; context.fillstyle=“white”; context.fillrect(0,hh,canvas.width,canvas.height/4); context.font=’60ptcalibri’; context.shadowcolor=“rgba(127,127,127,1)”; context.shadowo学习态度怎么写fftx=3; context.shadowoffty=3; context.shadowblur=0; context.fillstyle=“rgba(0,0,0,0.8)”; context.filltext(“blurcanvas”,40,80+hh); //ctionthree–downshadoweffect 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.shadowofftx=i*2; context.shadowoffty=i*2; context.shadowblur=i*2; context.fillstyle=“rgba(127,127,127,1)”; context.filltext(“blurcanvas”,40,80+hh); } //ctionfour–fadeeffect 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.shadowofftx=0; context.shadowoffty=-i*2; context.shadowblur=i*2; context.fillstyle=“rgba(127,127,127,1)”; context.filltext(“blurcanvas”,40,80+hh); } for(vari=0;i<10;i++) { context.shadowcolor=“rgba(255,255,255,”+((10-i)/10)+“)”; context.shadowofftx=0; context.shadowoffty=i*2; context.shadowblur=i*2; context.fillstyle=“rgba(127,127,127,1)”; context.filltext(“blurcanvas”,40,80+hh); } for(vari=0;i<10;i++) { context.shadowcolor=“rgba(255,255,255,”+((10-i)/10)+“)”; context.shadowofftx=i*2; context.shadowoffty=0; context.shadowblur=i*2; context.fillstyle=“rgba(127,127,127,1)读书会策划”; context.filltext(“blurcanvas”,40,80+hh); } for(vari=0;i<10;i++) { context.shadowcolor=“rgba(255,255,255,”+((10-i)/10)+“)”; context.shadowofftx=-i*2; context.shadowoffty=0; context.shadowblur=i*2; context.fillstyle=“rgba(127,127,127,1)”; context.filltext(“blurcanvas”,40,80+hh); } } </script> </head> <body> <h1>html5canvasclipdemo–bygloomyfish</h1> <pre>fillandstrokeclip</pre> <divid=“my_painter”> <canvasid=“text_canvas”></canvas> </div> </body> </html>
