html5画布画五角星,css绘制五角星

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

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

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

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

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

　　通过对五角星的分析，我们可以确定每个顶点的坐标规律。这里需要注意的一点是，在canvas中，Y轴的方向是向下的。

　　相应的代码如下：

　　代码将内容复制到剪贴板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 . fill()；context . stroke()；最终效果：

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

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