使用HTML5+Javascript在浏览器上制作PPT的详解（图文）

193 阅读 0 评论 128 点赞

我是靠谱客的博主柔弱诺言，最近开发中收集的这篇文章主要介绍使用HTML5+Javascript在浏览器上制作PPT的详解（图文），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<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用于显示图片、游戏、超链接等辅助性内容，其中演示过程也包括一些特效，如逐渐显示、文字阴影、颜色渐变等等。

对于每个即将显示的内容，可以创建一个对象：

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="";
}
登录后复制

这样为每个对象创建一个对象之后需要事先赋值和初始化，例如：

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";
}
登录后复制

这是脚本，演示区域需要一个<canvas>标签创建一个画布：

<canvas id="first" width=600 height=600 style="border:1px solid black;"></canvas>
登录后复制

通过ID获得这个画布就比较简单不重复了。以下介绍几个特效，第一个是阴影文字：

可以看到HTML对颜色处理的能力与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);
}
登录后复制

其次关于矩形的动画，有几种动画：

其中形状的出现都是动画，只是图片不好显示：

/*************绘制收缩矩形的函数***********************/
   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);
}
/*********************************/
登录后复制

/***********建立淡出的圆**************************/
function circle1()
{    
   if(count>9.0)
   clearInterval(in_ID3);
      count=count+1.0;
    var gradient = cxt.createRadialGradient(rx,ry,0,rx,ry,rr);
       gradient.addColorStop(count/10.0, style1);
       gradient.addColorStop(1-count/10.0, style2);
    cxt.beginPath();
    cxt.fillStyle=gradient;
    //cxt.fillStyle="red";
    cxt.arc(rx,ry,rr,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
}
function draw_circle(x,y,r,style11,style12,flag)
{  
       count=0.0;
      rx=x; ry=y;  style1=style11;style2=style12; rr=r;
      in_ID3=setInterval("circle1()",50);
登录后复制

}
登录后复制

最后是事件处理函数了，由于时间仓促，开始的时候没有设计好：

function event1()
{
     if(num==179)
        num=-1;
  if(event.keyCode==40)
   {  num+=1;
     if(num==100||num==9||num==18||num==29||num==42||num==109||num==115||num==121||num==123||num==133||num==148||num==164||num==0)
        cxt.clearRect(0,0,600,600);
    switch(My[num].type)
    {
     case 1:draw_rect_scale(My[num].rx,My[num].ry,My[num].rw,My[num].rh,My[num].style1,My[num].style2,My[num].rflag); break;
     case 0: draw_text(My[num].tx,My[num].ty,My[num].tfont,My[num].tstyle,My[num].tvalue,My[num].tflag); break;
     case 2: donghua(num); break;
     case 3: removeNode(num);break;
     case 4: draw_circle(My[num].rx,My[num].ry,My[num].r,My[num].style1,My[num].style2,My[num].rflag);break;
     }
   }
   
}
登录后复制

最后，由于制作时间只有三天，整个程序比较粗糙，设计等方面还不完善，但是整体效果还挺好，老师和同学的评价还不错。有兴趣的同学可以与我讨论一下。