近几年，HTML5这个词儿火得不行，连Google、Adobe还有Microsoft那些巨头也参与其中。大家都说这可能只是赶个时髦，但也有人觉得这就是Web技术的一场革命。说不定以后网页就能变成桌面应用那样，浏览器就成了平台。有人还想过，将来的电脑可能只需要浏览器和存储设备这些基本东西，用户只要上网就能下各种应用，甚至直接在服务器上运行，然后把结果传回来。
HTML5开启新时代
HTML5这个新的 HTML 标准，可真不赖！里面有好多新东西和 API，而且把原本的标记语言也弄得更好用。它带来了超多的多媒体元素、画图功能还有本地存储这些实用功能，让我们做的网页应用能有更棒的互动效果。这个开放的标准得到了广大开发者和公司的喜爱和支持，大家都觉得这是 Web 发展的一个大进步。
HTML5应用前景广阔
如今，随着网络的愈发普及以及手机APP的大行其道，HTML5成了一个备受关注的跨平台技术。无论是网站设计还是应用开发，甚至是物联网方面，HTML5都有着广阔的用武之地。特别在移动端，使用HTML5一次开发就能在各种设备上都能运行，省时又省力！
自制HTML5 Presentation
咱们最近搞了个HTML5新特性和未来发展的讲演，本来想用PowerPoint做，结果想展示点HTML5画图啥的，就自己用HTML5搞了个小应用，可以在网页上跑起来。虽然我们只花了三天时间，写了大概五六百行代码，效果可能没那么好，没有PowerPoint专业，但是大家都觉得挺有意思的，也算是一次成功的尝试！
程序主界面设计
function UNITE()
{
this.type=-1; //0表示文本，1表示矩形,2表示将要表演动画，3表示移去节点，4表示圆
this.rx=-1;
this.ry=-1;
this.r=-1;
this.rw=-1;
this.rh=-1;
this.style1="";
this.style2="";
this.rflag=1;//表示举行的类型.默认的时候是1类型
this.tx=-1;
this.ty=-1;
this.t;
this.tfont="";
this.tvalue="";
this.tflag=1;//1表示需要延时，0表示不需要延时
this.url="";
}
网站设计超赞！跟PPT似的，直接用鼠标滑轮就能翻页看内容。左边是文本，右边能看到图片、小游戏和超链接这些好玩的东西。在展示过程中有炫酷效果，比如慢慢出现、字有影子还有变色。
对象创建与初始化
var My=new Array();
function CreatePage1()
{
My[0]=new UNITE();
My[0].type=0; My[0].tx=50;My[0].ty=50;
My[0].tstyle="blue";My[0].tfont="50px 隶书";
My[0].tflag=0; My[0].tvalue="HTML5+CSS3+Javascript";
}
为了能精确操控每个要展示的东西，咱们需要给每样东西都设置专属的变量，提前设好数值和特征。这样在运用中，就能更清楚地看到每个部分在整个过程中的表现！
脚本编写与画布创建
搞脚本，得先有个画板让我们展示东西。找画板靠ID，方便又省事儿。
特效展示
HTML5的颜色处理功能强大得和SVG差不多！展示文字效果超棒哦～
超酷的矩形动画：好几种形状会活灵活现地出来，让你看了眼花缭乱！
function draw_text(x,y,font,style,value,flag)
{
tx=x; ty=y;tfont=font;tstyle=style;tvalue=value;
if(flag==2)//表示需要延时
in_ID2=setTimeout("inte3()",200);
else
in_ID2=setTimeout("inte2()",20);
}
function inte2()
{ cxt.beginPath();
cxt.font=tfont;
cxt.shadowColor = "rgba(50, 50, 50, 0)";
cxt.fillStyle=tstyle;
cxt.fillText(tvalue,tx,ty);
cxt.closePath();
clearTimeout(in_ID2);
}
function inte3()
{ cxt.beginPath();
cxt.fillStyle =tstyle;
cxt.shadowOffsetX = 0;
cxt.shadowOffsetY = 10;
cxt.shadowBlur = 10;
cxt.font=tfont;
cxt.shadowColor = "rgba(50, 50, 50, 1)";
cxt.fillText(tvalue,tx,ty);
cxt.closePath();
clearTimeout(in_ID2);
}
虽然开始的设计有点赶，但在之后的展示里，我们做得越来越好！
粗糙之处与展望
虽然我们的项目有点匆忙，不够精细，但最后的成果还是赢得了大家的好评，这让我们更有动力去做更好的东西。我们会继续努力，让它变得更好用，更有趣，同时也会尝试新的想法。
总之，”HTML5：只是炒作还是真的能改变世界？”这个问题让我们都在思考互联网技术的未来。虽然大家有争论，但是没法否认，HTML5现在就是科技行业里不能不重视的大事件之一！
/*************绘制收缩矩形的函数***********************/
function inte1()
{
var gradient = cxt.createLinearGradient(0, 0, 500, 40);
gradient.addColorStop(0.1, style1);
gradient.addColorStop(0.9, style2);
if(count>10.0)
clearInterval(in_ID1);
count=count+1.0;
var s,x1,y1,w1,h1;
s=count/10.0; x1=rx+0.5*rw*(1-s); y1=ry+0.5*rh*(1-s);
w1=s*rw; h1=rh*s; cxt.fillStyle=gradient;
cxt.fillRect(x1,y1,w1,h1);
}
function draw_rect_scale(x,y,w,h,style11,style21,flag)
{ count=0.0;
rx=x; ry=y; rw=w; rh=h; style1=style11;style2=style21;
switch(flag)//选择动画的类型
{
case 1:in_ID1=setInterval("inte1()",50);break;
case 2:in_ID1=setInterval("rflag2()",50); break;
case 3:in_ID1=setInterval("rflag3()",50); break;
}
}
function rflag2() //表示建立动画效果是2类型的函数
{
var gradient = cxt.createLinearGradient(0, 0, 500, 40);
gradient.addColorStop(0.1, style1);
gradient.addColorStop(0.9, style2);
if(count>10.0)
clearInterval(in_ID1);
count=count+1.0; cxt.fillStyle=gradient;
cxt.fillRect(rx-0.5*rw*0.2,ry,rw*count/10.0,rh*1.1);
}
function rflag3()//表示建立第三个效果是3类型的函数
{
if(count>10.0)
clearInterval(in_ID1);
count=count+1.0;
var gradient = cxt.createLinearGradient(0, 0, 500, 40);
gradient.addColorStop(0.1, style1);
gradient.addColorStop(0.9, style2);
cxt.fillStyle=gradient;
cxt.fillRect(rx-0.5*rw*0.2,ry,rw*1.2,rh*1.1);
cxt.clearRect(rx-0.5*rw*0.2+count/10.0*0.5*rw,ry,rw*1.2*(1.2-count/10.0),rh*1.1);
}
/*********************************/
评论0