html中阴影效果,css实现阴影效果

　　canvas/canvas是HTML5中的新标签，用来画图形。其实这个标签和其他标签一样，特殊之处在于它可以得到一个CanvasRenderingContext2D对象，这个对象可以通过JavaScript脚本来控制绘制。

　　canvas/canvas只是一个绘制图形的容器。除了id，class，style等属性，还有高度和宽度属性。在画布上绘制元素有三个主要步骤：

　　1.获取canvas元素对应的DOM对象，这是一个Canvas对象；

　　2.调用CanvasRenderingContext2D对象的getContext()方法；

　　3.调用CanvasRenderingContext2D对象进行绘制。

　　阴影绘制:

　　设置或返回用于阴影的颜色。ShadowBlur设置或返回用于阴影的模糊级别(值越高，越模糊)。ShadowOffsetX设置或返回阴影和形状之间的水平距离。ShadowOffsetY设置或返回阴影和形状之间的垂直距离。我们给之前画的五角星加阴影。

　　代码将内容复制到剪贴板var canvas=document . getelementbyid( canvas )；var context=canvas . get context( 2d )；context . begin path()；//设置一个顶点的坐标，并使路径为(vari=0；i5；I){ context . line to(Math . cos((18 I * 72)/180 * Math。PI)*200 200，-Math.sin((18 i*72)/180*Math。PI)* 200 200)；context . line to(Math . cos((54i * 72)/180 * Math。PI)*80 200，-Math.sin((54 i*72)/180*Math。圆周率)* 80 200)；} context . close path()；//设置边框样式和填充颜色context.lineWidth= 3context . fill style= # f6f 152 ；context . stroke style= # f 5270 b ；context . shadow color= # f7f2b 4 ；context.shadowOffsetX=30context.shadowOffsetY=30context . shadow blur=2；context . fill()；context . stroke()；效果如下：

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。