对于最有能力的领航人风浪总是格外的汹涌。第一个青春是上帝给的；第二个的青春是靠自己努力的。
创建阴影效果需要操作以下4个属性：
1.context.shadowColor：阴影颜色。
2.context.shadowOffsetX：阴影x轴位移。正值向右，负值向左。
3.context.shadowOffsetY：阴影y轴位移。正值向下，负值向上。
4.context.shadowBlur：阴影模糊滤镜。数据越大，扩散程度越大。
这四个属性只要设置了第一个和剩下三个中的任意一个就有阴影效果。不过通常情况下，四个属性都要设置。
例如，创建一个向右下方位移各5px的红色阴影，模糊2px，可以这样写。
JavaScript Code复制内容到剪贴板
- context.shadowColor="red";
- context.shadowOffsetX=5;
- context.shadowOffsetY=5;
- context.shadowBlur=2;
需要注意的是，这里的阴影同其他属性设置一样，都是基于状态的设置。因此，如果只想为某一个对象应用阴影而不是全局阴影，需要在下次绘制前重置阴影的这四个属性。
运行结果：
阴影文字：
只要设置shadowOffsetX与shadowOffsetY的值，当值都正数时，阴影相对文字的右下
方偏移。当值都为负数时，阴影相对文字的左上方偏移。
3D拉影效果：
在同一位置不断的重复绘制文字同时改变shadowOffsetX、shadowOffsetY、shadowBlur
的值，从小到大不断偏移不断增加，透明度也不断增加。就得到了拉影效果文字。
边缘模糊效果文字：
在3D拉影效果的基础上在四个方向重复，就得到了边缘羽化的文字效果。
运行效果：
程序代码：
JavaScript Code复制内容到剪贴板
- <!DOCTYPEhtml>
- <html>
- <head>
- <metahttp-equiv="X-UA-Compatible"content="chrome=IE8">
- <metahttp-equiv="Content-type"content="text/html;charset=UTF-8">
- <title>CanvasClipDemo</title>
- <linkrel="nofollow noopener noreferrer" href="default.css"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.PleaseinstallaHTML5compatiblebrowser.");
- return;
- }
- varcontext=canvas.getContext('2d');
- //sectionone-shadowandblur
- context.fillStyle="black";
- context.fillRect(0,0,canvas.width,canvas.height/4);
- context.font='60ptCalibri';
- context.shadowColor="white";
- context.shadowOffsetX=0;
- context.shadowOffsetY=0;
- context.shadowBlur=20;
- context.fillText("BlurCanvas",40,80);
- context.strokeStyle="RGBA(0,255,0,1)";
- context.lineWidth=2;
- context.strokeText("BlurCanvas",40,80);
- //sectiontwo-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.shadowOffsetX=3;
- context.shadowOffsetY=3;
- context.shadowBlur=0;
- context.fillStyle="RGBA(0,0,0,0.8)";
- context.fillText("BlurCanvas",40,80+hh);
- //sectionthree-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.shadowOffsetX=i*2;
- context.shadowOffsetY=i*2;
- context.shadowBlur=i*2;
- context.fillStyle="RGBA(127,127,127,1)";
- context.fillText("BlurCanvas",40,80+hh);
- }
- //sectionfour-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.shadowOffsetX=0;
- context.shadowOffsetY=-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.shadowOffsetX=0;
- context.shadowOffsetY=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.shadowOffsetX=i*2;
- context.shadowOffsetY=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.shadowOffsetX=-i*2;
- context.shadowOffsetY=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>
到此这篇关于实例讲解如何使用HTML5 Canvas绘制阴影效果的方法就介绍到这了。志在必得心坚强，女神出马鬼难当，一路拿下收视率，当今女孩当自强。更多相关实例讲解如何使用HTML5 Canvas绘制阴影效果的方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！