HTML5canvas绘制五角星的办法-

这篇文章主要介绍了对于HTML5canvas绘制五角星的办法，有着一定的参照 价值，此刻分享给大家，有需要的伴侣可以参照 一下 这篇文章主要介绍了对于HTML5 canvas绘制五角星的办法，有着一定的参照 价值，此刻分享给大家，有需要的伴侣可以参照 一下

是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家细致介绍了HTML5 canvas根本画图之绘制五角星办法，感乐趣的小同伴们可以参照 一下

是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();

最后结果：

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