html5-Canvas可以在web中繪制各種圖形_HTML5教程
      
編輯Tag賺U幣
      


      教程Tag：canvas繪圖添加
      


      

      推薦：html5的新玩法——語音搜索
      谷歌的網站是時逛時新啊，今天在他們首頁發現了HTML5的新玩法——語音搜索�？上У氖侵挥衱ebkit核心的瀏覽器才能使用。用法很簡單,只需要在input添加屬性x-webkit-speech即可
      
在HTML5/">html5中我覺得最重要的就是引入了Canvas，使得我們可以在web中繪制各種圖形。給人感覺單在這點上有點模糊我們web和桌面程序的感覺。在html5外web中也有基于xml的繪圖如：VML、SVG。而Canvas為基于像素的繪圖。Canvas是一個相當于畫板的html節點，我們必須以js操作繪圖。 
      如下： 
      <canvas id="myCanvas" width="600" height="300">你的瀏覽器還不支持哦</canvas>定義。 
      我們可以獲取canvas對象為var c=document.getElementById("myCanvas");其應有js屬性方法如下列舉： 
      1：繪制渲染對象，c.getContext("2d"),獲取2d繪圖對象，無論我們調用多少次獲取的對象都將是相同的對象。 
      2：繪制方法：
      clecrRect(left,top,width,height)清除制定矩形區域， 
      fillRect(left,top,width,height)繪制矩形，并以fillStyle填充。 
      fillText（text,x,y）繪制文字； 
      strokeRect(left,top,width,height)繪制矩形，以strokeStyle繪制邊界。 
      beginPath():開啟路徑的繪制,重置path為初始狀態； 
      closePath():繪制路徑path結束，它會繪制一個閉合的區間，添加一條起始位置到當前坐標的閉合曲線； 
      moveTo（x，y）：設置繪圖其實坐標。 
      lineTo(x，y);繪制從當前其實位置到x，y直線。 
      fill（），stroke（），clip（）：在完成繪制的最后的填充和邊界輪廓，剪輯區域。 
      arc（）：繪制弧,圓心位置、起始弧度、終止弧度來指定圓弧的位置和大小； 
      rect():矩形路徑; 
      drawImage（Imag img）：繪制圖片； 
      quadraticCurveTo():二次樣條曲線路徑,參數兩個控制點； 
      bezierCurveTo（）：貝塞爾曲線，參數三個控制點； 
      createImageData,getImageData，putImageData:為Canvas中像素數據。ImageData為記錄width、height、和數據 data，其中data為我們色素的記錄為 
      argb，所以數組大小長度為width*height*4，順序分別為rgba。getImageData為獲取矩形區域像素，而putImageData則為設置矩形區域像素； 
      … and so on！ 
      3：坐標變換： 
      translate（x,y）：平移變換，原點移動到坐標（x，y）； 
      rotate（a）：旋轉變換，旋轉a度角； 
      scale（x，y）：伸縮變換； 
      save（），restore（）：提供和一個堆棧，保存和恢復繪圖狀態，save將當前繪圖狀態壓入堆棧，restore出棧，恢復繪圖狀態； 
      … and so on！ 
      好了，也晚了。附我的測試代碼，： 

      復制代碼 代碼如下:www.wf0088.com
       
      <html> 
      <head> 
      </head> 
      <body> 
      <canvas id="myCanvas" width="600" height="300">你的瀏覽器還不支持哦</canvas> 
      <script type="text/javascript"> 
      var width,height,top,left; 
      width=height=100; 
      top=left=5; 
      var x=10; 
      var y=10; 
      var c=document.getElementById("myCanvas"); 
      var maxwidth=c.width-5; 
      var maxheight=c.height-5; 
      var cxt=c.getContext("2d"); 
      cxt.strokeStyle="#00f"; 
      cxt.strokeRect(0,0,c.width,c.height); 
      var img=new Image(); 
      img.src="1.gif"; 
      var MyInterval=null; 
      start(); 
      function Refresh(){ 
      cxt.clearRect(left,top,width,height); 
      if((left+x)>(maxwidth-width)||left+x<0){ 
      x=-x; 
      } 
      if((top+y)>(maxheight-height)||top+y<0){ 
      y=-y; 
      } 
      left=left+x; 
      top=top+y; 
      cxt.drawImage(img,left,top,width,height); 
      cxt.font="20pt 宋體"; 
      cxt.fillText("破狼",left,top+25); 
      } 
      function start(){ 
      if(MyInterval==null){ 
      MyInterval=setInterval("Refresh()",100); 
      } 
      } 
      function stop(){ 
      if(MyInterval!=null){ 
      clearInterval(MyInterval); 
      MyInterval=null; 
      } 
      } 
      function InRectangle(x,y,rectx,recty,rwidth,rheight){ 
      return (x>=rectx&&x<=rectx+rwidth)&&(y>=recty&&y<=recty+rheight) 
      } 
      c.onmouseover=function(e){ 
      if(InRectangle(e.clientX,e.clientY,left,top,width,height)){ 
      stop(); 
      } 
      c.onmouseout=function(e){ 
      start(); 
      } 
      c.onmousemove=function(e){ 
      if(InRectangle(e.clientX,e.clientY,left,top,width,height)){ 
      if(MyInterval!=null){ 
      stop(); 
      } 
      }else{ 
      start(); 
      } 
      } 
      } 
      </script> 
      </body> 
      </html> 

      

            
      分享：html5聲頻audio和視頻video等新特性詳細說明
      html5作為下一代web標準，年前軒起了html5熱潮;html5聲頻audio和視頻video一直被網友們所關注，本人也是好奇于是搜集整理一些相關的東東，需要了解的朋友可以參考下
      


      

      



      


      來源：未知//所屬分類：HTML5教程/更新時間：2013-04-22


      

      



      


      



      相關HTML5教程：