H5如何用绘制五角星-

这次给大家带来用H5如何用绘制五角星，怎么H5如何用绘制五角星？H5绘制五角星的注意事项是什么，下面就是实战案例，一起来看一下。 这次给大家带来用H5如何用绘制五角星，怎么H5如何用绘制五角星？H5绘制五角星的注意事项是什么，下面就是实战案例，一起来看一下。

是HTML5中新增的标签，用于绘制图形，现实上，这个标签和其他的标签同样，其特别之处在于该标签可以猎取一个CanvasRenderingContext2D对象，我们可以通过JavaScript足原来控制该对象进行画图。

只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在>元素上画图主要有三步：

1.猎取元素对应的DOM对象，这是一个Canvas对象；
2.调取Canvas对象的getContext()办法，得到一个CanvasRenderingContext2D对象；
3.调取CanvasRenderingContext2D对象进行画图。

通过对五角星剖析，我们可以肯定各个顶点坐标的纪律，这里需要注意的一点是：在canvas中，Y轴的标的目的是向下的。

var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    context.beginPath();   
    //设定是个顶点的坐标，依据顶点拟定途径   
    for (var i = 0; i < 5; i++) {   
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,   
                        -Math.sin((18+i*72)/180*Math.PI)*200+200);   
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,   
                        -Math.sin((54+i*72)/180*Math.PI)*80+200);   
    }   
    context.closePath();   
    //设置边框样式以及填充颜色   
    context.lineWidth="3";   
    context.fillStyle = "#F6F152";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();

信赖看了这些案例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！

相干浏览：

如何用正则表达式匹配IP地址与域名

什么样的正则表达式可以显示highlight高亮

微信小程序怎么上传头像

以上就是H5如何用绘制五角星的细致内容，更多请关注 百分百源码网 其它相干文章！