html5中说这段代码定义的函数可以绘制多角星，不知道它的具体意思，麻烦哪位大侠指点一下计算原理

程序可以改动一下，看起来会更容易一点。

// 开始创建路径

context.beginPath()

var dig = Math.PI / n * 4

//改：var dig = 2*(2*Math.PI / n)

//括号里就是将360度平均分成n份

//为什么前面还要乘以2，见下面（2.画这类图形的技巧（或者说规律。））

for(var i = 0i <n i++)

{

    var x = Math.sin(i * dig)

    var y = Math.cos(i * dig)

    context.lineTo(x * size + dx ,y * size + dy)

//上面三行改成：

    //var x = dx+size*Math.sin(i * dig) //（1）

    //var y = dy+size*Math.cos(i * dig) //（2）

    //context.lineTo(x,y)

    //（1），（2）其实是圆的参数方程

    //把（1），（2）再改，如下：

    //var x=dx+size*Math.cos(Math.PI/2-i*dig)//sin变cos

    //var y=dy+size*Math.sin(Math.PI/2-i*dig)//cos变sin

}

context.closePath()

首先至少掌握三点知识。

1.这类图形的特点。

2.画这类图形的技巧（或者说规律。）

3.圆的参数方程。

变量：

n:N角星的顶点数。

dx,dy: N角星的位置，也是N角星中心点的坐标

size: N角星的大小，也是N角星任一顶点到N角星中心点的距离。

angle: 相邻顶点到中心点形成的夹角度

dig: 每一段两点顶点与中心点形成的夹角度

1.这类图形的特点。

特点：

（1）所有的顶点都在一个圆上。圆心O为图形的中心点，半径r为中心点到任一顶点的距离,即size。

（2）任意相邻的两个顶点到中心点所形成的角度相等。则angle=2*PI/n：

2.画这类图形的技巧（或者说规律。）

你给的程序画出来的图形，每画一条线段之间跳过了一个顶点。

举个例子，拿七角星来讲，首先先给七角星的顶点按顺时针编号，即1-7。

你给的程序是这么连的：1-3-5-7-2-6-4-6-1 ,

跟据这点，可得出一个规律：

1-3-5-7-2-6-4-6-1，这个数列，每相邻的两点与中心点形成的角度相等。

即1-3，3-5...形成的角度相等，这个角度即是dig=2*angle。

3.圆的参数方程.

方程如下：（x0,y0）为中心点的坐标。即(dx,dy)，a为角度，r为半径即size

x=x0+r*cos(a)

y=y0+r*sin(a)

举个例，画7角星：

从0度的点开始画：按1-3-5-7-2-6-4-6-1画,

那么，

第1点：x=dx+size*cos(0)y=dy+size*sin(0)

第3点：x=dx+size*cos(0+dig*1)y=dy+size*sin(0+dig*1)

第5点: x=dx+size*cos(0+dig*2)y=dy+size*sin(0+dig*2)

...

表达有限，比较凌乱，哈哈。

根据这个原理，我写出下面的函数，画出来的星形比较“骨感”：

//参数的意思与你给出来的一样。

//注，num不能为偶数，否则画出来的不是星形

function drawStar(pan2d,num,x,y,size)

{

    pan2d.beginPath()

    var startAngle=-Math.PI*0.5// 起点角度

    var dig=Math.PI-Math.PI/num//var dig=Math.PI-2*Math.PI/num*0.5

    for(var i=0i<numi+=1)

    {

        var angle=startAngle+dig*i

        var px=x+size*Math.cos(angle)

        var py=y+size*Math.sin(angle)

        pan2d.lineTo(px,py)

    }

    pan2d.closePath()

    pan2d.stroke()

}

因为科技编辑身份，之前曾以HTML5工具专业性为主要指标为国内iH5平台做过排名。有四个指标，功能是H5工具使用的基础，模板属于工具适用性的象征，定制服务能体现平台的生态性，易用度则是用户友好范畴。结果如下，希望对你有帮助。

第一名：iH5（14星）

工具功能 ★★★★★ 模板质量 ★★★

定制支持 ★★★★ 易用度 ★★

【优点】PC端云端编辑，提供H5编辑、效果监测和平台社交功能，包括事件控制、时间轴、多屏控制和数据库等高级功能。工具使用免费，教程详细，能搜索案例联系设计师。

【缺点】工具的熟练使用需要较多学习时间。

[备注] 原为VXPLO互动大师。

第二名：易企秀（13星）

工具功能 ★★ 模板质量 ★★

定制支持 ★★★★ 易用度 ★★★★★

【优点】 提供HTML5设计的APP，针对移动互联网营销，能像PPT一样制作移动H5页面。模板丰富，超过1000个。支持场景定制，提供设计师展示平台。

【缺点】功能有限，缺乏高级功能。成品动效一般，屏幕自适应效果不是很好。

[备注] 已进军海外市场。

第二名：ME微杂志（13星）

工具功能 ★★★ 模板质量 ★★★

定制支持 ★★★ 易用度 ★★★★

【优点】PC端云端编辑，网站定位明确，而且编辑界面美观度较强且友好，包含表单、投票功能。

【缺点】模板质量参差不齐，大部分较一般。以功能组件为主，拓展性不强。

并列第二：场景应用（13星）

工具功能 ★★★ 模板质量 ★★★

定制支持 ★★★ 易用度 ★★★★

【优点】PC端云端编辑，提供创作、推广、效果分析服务，包括抽奖、卡券等高级功能，模板丰富，提供H5定制。

【缺点】编辑界面不够简洁，功能有限，缺乏高级功能。

[备注] 背后设计团队为云来。

并列第二：Epub360（13星）

工具功能 ★★★★ 模板质量 ★★

定制支持 ★★★★ 易用度 ★★★

【优点】PC端云端编辑，编辑界面美观，包含一定的HTML5编辑高级功能，作品管理功能较好。

【缺点】模板数量较少，以功能组件为主，拓展性不够强。需要Chrome浏览器，免费版限制较大。

第三名：MAKA（12星）

工具功能 ★★ 模板质量 ★★★

定制支持 ★★ 易用度 ★★★★★

【优点】提供HTML5设计的APP，主要面向个人用户，分为是否有模板两种编辑模式。模板大约60个，比较美观（题外话，运营团队强大）。

【缺点】功能有限，自主编辑的性能低，增值服务性价比低。

并列第三：搜狐快站（12星）

工具功能 ★★★★ 模板质量 ★★

定制支持 ★ 易用度 ★★★★★

【优点】提供HTML5设计的APP，网站定位明确，提供移动建站成套服务，包括优惠券、投票等功能。

【缺点】以提供功能组件为主，网站建设者编辑自由度不高，模板美观性一般。

并列第三：Mugeda（11星）

工具功能 ★★★★ 模板质量 ★★

定制支持 ★★ 易用度 ★★★

【优点】PC端云端编辑，编辑界面美观，提供事件控制、时间轴等高级功能。

【缺点】免费版功能非常有限，不提供私有模板。

第四名：We+（11星）

工具功能 ★★ 模板质量 ★★

定制支持 ★★★ 易用度 ★★★★

【优点】PC端云端编辑，编辑页面和模板较美观，主要提供H5定制，包括方案策划和新媒体传播。

【缺点】模板数量极少，作为主要面向企业的H5工具，功能单一，且增值费用高昂。

第五名：兔展（10星）

工具功能 ★★ 模板质量 ★★

定制支持 ★ 易用度 ★★★★★

【优点】PC端云端编辑，能像PPT一样制作移动H5页面，模板有大约130个。编辑页面简单易上手，动画实现方便。同时提供H5定制，包括方案策划和新媒体传播。

【缺点】模板精美度一般，编辑界面大小不可调节，上传的图会比例失调。免费版功能比较有限。

第五名：爆米兔（10星）

工具功能 ★★ 模板质量 ★★

定制支持 ★ 易用度 ★★★★★

【优点】PC端云端编辑，模板有大约40个。容易上手，有切图的特色功能。

【缺点】模板动态效果一般，工具功能有限，模板和作品数量极少。

上面列表中，模板质量没有超过三颗星的，原因很简单，真正好的H5作品靠的是重构的创意，而非套用。

以上。

这里的“*”号是通配符，即指，网页html中所有标签意思。

如：

*{padding:0... }

由于不同浏览器对于同样的页面元素有不同的默认样式，所以使用通配符星号（*）先将所有可能影响布局的默认样式统一一下是下十分必要的。而星号（*）匹配所有元素，省去了一个一个去写元素名称的麻烦。

---