html5星,html5星星特效

国内HTML5工具有哪些

因为科技编辑身份，之前曾以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作品靠的是重构的创意，而非套用。

以上。

相关问答

Q1: 如何用html5写特殊符号五角星

首先贴出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中，五角星的绘制。

Q2: 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();

}

Q3: html5中为什么要加*号

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

如：

*{padding:0; ... }

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

Q4: html5的星星怎么变圆润点

border-radius 这个属性可以设置边角圆润，W3c里面一查就明白了