用HTML5+Javascript在浏览器上制作PPT.doc

? 用HTML5+Javascript在浏览器上制作PPT html5浏览器javascriptfunctionpowerpointmicrosoft [javascript]?view plaincopyprint? span?style=font-size:18px;?? /span?? ? ? ? Html5最近在IT领域有些热，在Google、Adobe与Microsoft等大公司间掀起了一些风波。关于HTML5之热，有可能只是噱头，但也有可能真是一次Web的技术革命。它或许真的能让网页回归到桌面应用程序，而浏览器是平台。 ? ? 对于将来的互联网，不知道大家有没有这种设想：网页好比现在桌面上的应用程序，浏览器就像windows等操作系统，那么将来的PC机制需要浏览器和存储设备等基础应用程序和设备，PC用户可以通过网页像服务器请求下载相应的应用程序甚至直接在服务器端运行再返回结果到客户端。 ? ? ?本人最近需要做一个presentation,关于HTML5的新特性和应用前景的。本来打算用Powerpoint，但是为了展现HTML5实际的图形界面能力，我们组决定直接用HTML5写一个应用程序在浏览器中运行，实现PPT的效果，由于制作的时间只有三天，总共也有五六百行代码，所以做的比较粗超了，虽然不如Powerpoint专业和强大，但是作为自己团队的第一次尝试还是小有成就感的，也希望大家指正。以下可以粗略的讲解一下。这是程序的主界面。 ? ? ? ? ? ?演示时基本与PPT一致，通过按方向键控制内容的显示。其中左边用于显示文本内容，右边Frame用于显示图片、游戏、超链接等辅助性内容，其中演示过程也包括一些特效，如逐渐显示、文字阴影、颜色渐变等等。 ? ? 对于每个即将显示的内容，可以创建一个对象： [javascript]?view plaincopyprint? span?style=font-size:18px;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.tstyle=;?? ??this.tfont=;?? ??this.tvalue=;?? ??this.tflag=1;//1表示需要延时，0表示不需要延时?? ??this.url=;?? }/span?? ? ?这样为每个对象创建一个对象之后需要事先赋值和初始化，例如： ? ? [javascript]?view plaincopyprint? span?style=font-size:18px;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;?? }/span?? ? 这是脚本，演示区域需要一个canvas标签创建一个画布： [html]?view plaincopyprint? span?style=font-size:18px;canvas?id=first?width=600?height=600?style=border:1px?solid?black;/canvas/span?? ? ?通过ID获得这个画布就比较简单不重复了。 以下介绍几个特效，第一个是阴影文字：?? ?? ? ? ? 可以看到HTML对颜色处理的能力与SVG有的一拼的，具体的代码如下,包括两种文字显示的类型 ? ? [javascript]?view plaincopyprint? span?style=font-size:18px;function??draw_text(x,y,font,style,value,flag)?? ?{?? ???tx=x;?ty=y;tfont=font;tstyle=style;tvalue=value;?? ?????if(flag==2)//表示需要延时?? ????in