怎么使用HTML5+Javascript在瀏覽器上制作PPT

這篇文章主要為大家展示了怎么使用HTML5+Javascript在瀏覽器上制作PPT，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“怎么使用HTML5+Javascript在瀏覽器上制作PPT”這篇文章吧。

Java的特點有哪些

Java的特點有哪些 1.Java語言作為靜態(tài)面向?qū)ο缶幊陶Z言的代表，實現(xiàn)了面向?qū)ο罄碚?，允許程序員以優(yōu)雅的思維方式進行復(fù)雜的編程。 2.Java具有簡單性、面向?qū)ο?、分布式、安全性、平臺獨立與可移植性、動態(tài)性等特點。 3.使用Java可以編寫桌面應(yīng)用程序、Web應(yīng)用程序、分布式系統(tǒng)和嵌入式系統(tǒng)應(yīng)用程序等。

<span style="font-size:18px;">  
</span>

     Html5最近在IT領(lǐng)域有些熱，在Google、Adobe與Microsoft等大公司間掀起了一些風(fēng)波。關(guān)于HTML5之熱，有可能只是噱頭，但也有可能真是一次Web的技術(shù)革命。它或許真的能讓網(wǎng)頁回歸到桌面應(yīng)用程序，而瀏覽器是平臺。

   對于將來的互聯(lián)網(wǎng)，不知道大家有沒有這種設(shè)想：網(wǎng)頁好比現(xiàn)在桌面上的應(yīng)用程序，瀏覽器就像windows等操作系統(tǒng)，那么將來的PC機制需要瀏覽器和存儲設(shè)備等基礎(chǔ)應(yīng)用程序和設(shè)備，PC用戶可以通過網(wǎng)頁像服務(wù)器請求下載相應(yīng)的應(yīng)用程序甚至直接在服務(wù)器端運行再返回結(jié)果到客戶端。

    本人最近需要做一個presentation,關(guān)于HTML5的新特性和應(yīng)用前景的。本來打算用Powerpoint，但是為了展現(xiàn)HTML5實際的圖形界面能力，我們組決定直接用HTML5寫一個應(yīng)用程序在瀏覽器中運行，實現(xiàn)PPT的效果，由于制作的時間只有三天，總共也有五六百行代碼，所以做的比較粗超了，雖然不如Powerpoint專業(yè)和強大，但是作為自己團隊的第一次嘗試還是小有成就感的，也希望大家指正。以下可以粗略的講解一下。這是程序的主界面。

      演示時基本與PPT一致，通過按方向鍵控制內(nèi)容的顯示。其中左邊用于顯示文本內(nèi)容，右邊Frame用于顯示圖片、游戲、超鏈接等輔助性內(nèi)容，其中演示過程也包括一些特效，如逐漸顯示、文字陰影、顏色漸變等等。

   對于每個即將顯示的內(nèi)容，可以創(chuàng)建一個對象：

function UNITE()
{
  this.type=-1; //0表示文本，1表示矩形,2表示將要表演動畫，3表示移去節(jié)點，4表示圓
  this.rx=-1;
  this.ry=-1;
  this.r=-1;
  this.rw=-1;
  this.rh=-1;
  this.style1="";
  this.style2="";
  this.rflag=1;//表示舉行的類型.默認(rèn)的時候是1類型
  this.tx=-1;
  this.ty=-1;
  this.tstyle="";
  this.tfont="";
  this.tvalue="";
  this.tflag=1;//1表示需要延時，0表示不需要延時
  this.url="";
}

  這樣為每個對象創(chuàng)建一個對象之后需要事先賦值和初始化，例如：

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";
}

 這是腳本，演示區(qū)域需要一個<canvas>標(biāo)簽創(chuàng)建一個畫布：

<canvas id="first" width=600 height=600 style="border:1px solid black;"></canvas>

  通過ID獲得這個畫布就比較簡單不重復(fù)了。 以下介紹幾個特效，第一個是陰影文字：
 
       可以看到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);
}

   其次關(guān)于矩形的動畫，有幾種動畫：

      其中形狀的出現(xiàn)都是動畫，只是圖片不好顯示：

/*************繪制收縮矩形的函數(shù)***********************/
   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,h2;
      s=count/10.0;  x1=rx+0.5*rw*(1-s);  y1=ry+0.5*rh*(1-s);
       w1=s*rw; h2=rh*s;  cxt.fillStyle=gradient;
        cxt.fillRect(x1,y1,w1,h2);
    }
    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類型的函數(shù)
{
      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類型的函數(shù)
{
      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);

}

   最后是事件處理函數(shù)了，由于時間倉促，開始的時候沒有設(shè)計好：

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;
     }
   }
   
}

   最后，由于制作時間只有三天，整個程序比較粗糙，設(shè)計等方面還不完善，但是整體效果還挺好，老師和同學(xué)的評價還不錯。 有興趣的同學(xué)可以與我討論一下。  

以上就是關(guān)于“怎么使用HTML5+Javascript在瀏覽器上制作PPT”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注億速云行業(yè)資訊頻道。