189 8069 5689
因为科技编辑身份，之前曾以HTML5工具专业性为主要指标为国内iH5平台做过排名。有四个指标，功能是H5工具使用的基础，模板属于工具适用性的象征，定制服务能体现平台的生态性，易用度则是用户友好范畴。结果如下，希望对你有帮助。
创新互联专注于企业成都全网营销推广、网站重做改版、迎江网站定制设计、自适应品牌网站建设、HTML5、商城系统网站开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为迎江等各大城市提供网站开发制作服务。
第一名：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作品靠的是重构的创意，而非套用。
以上。
首先贴出HTML5页面的代码：
!DOCTYPE html
html
head
meta charset="UTF-8" /
titleCanvas案例/title
/head
script type="text/javascript" src="script.js"/script
body onload="draw('canvas')"
h1Canvas案例/h1
canvas id='canvas' width="400" height="300" /
/body
/html
在这个页面中我们写了一个canvas元素。该元素的ID为canvas。然后链接了script.js这个文件。
//script.js
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas==null){
return false;
}
var context = canvas.getContext('2d');
context.fillStyle="#eeeeff";
context.fillRect(0,0,400,300);
context.fillStyle='rgba(255,0,0,0.25)';
context.translate(200,50);
createFiveStar(context);
context.fill();
}
function createFiveStar(context){
var dx = 0;
var dy = 100;
var s = 50;
context.beginPath();
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI/5*4;
for(var i=0;i5;i++){
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
我们提供了两个方法一个是draw方法。当页面加载完成的时候就会执行draw方法中的内容。
而draw方法中呢又会执行createFiveStart函数。
下面我来分析下createFiveStart函数的内容：
function createFiveStar(context){
var dx = 0;//画出来的五角星x偏移位置
var dy = 100;//画出来的五角星y偏移位置
var s = 50;//画出来的五角星的大小
context.beginPath();//开始路径绘制
var x = Math.sin(0);//默认的x坐标
var y = Math.cos(0);//默认的y坐标
var dig = Math.PI/5*4;//弧度值
for(var i=0;i5;i++){
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);//划线
}
context.closePath();//结束路径
}
好了到了这里我们就完成了HTML5中，五角星的绘制。
程序可以改动一下，看起来会更容易一点。
// 开始创建路径
context.beginPath();
var dig = Math.PI / n * 4;
//改：var dig = 2*(2*Math.PI / n) ;
//括号里就是将360度平均分成n份
//为什么前面还要乘以2，见下面（2.画这类图形的技巧（或者说规律。））
for(var i = 0; i 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=0;inum;i+=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();
}
这里的“*”号是通配符，即指，网页html中所有标签意思。
如：
*{padding:0; ... }
由于不同浏览器对于同样的页面元素有不同的默认样式，所以使用通配符星号（*）先将所有可能影响布局的默认样式统一一下是下十分必要的。而星号（*）匹配所有元素，省去了一个一个去写元素名称的麻烦。
border-radius 这个属性可以设置边角圆润，W3c里面一查就明白了