实例讲解使用HTML5 Canvas绘制阴影效果的方法

2020-03-24 16:25:20

字体：大中小

来源：转载

供稿：网友

创建阴影效果需要操作以下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拉影效果的基础上在四个方向重复，就得到了边缘羽化的文字效果。运行效果：
html' target='_blank'>程序代码：JavaScript Code复制内容到剪贴板
head metahttp-equiv= X-UA-Compatible content= chrome=IE8 metahttp-equiv= Content-type content= text/html;charset=UTF-8 title CanvasClipDemo /title linkhref= 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.fill '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.fill '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.fill >html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html marquee标签如何实现上下滚动，marquee标签的滚动速度设置

下一篇：Html5实现如何在两个div元素之间拖放图像