html5 canvas常用api總結(一)

1.監聽瀏覽器加載事件。

window.addEventListener("load",eventWindowLoaded,false);

load事件在html頁面加載結束時發生。

第三個參數設置函數是否在事件傳遞到DOM對象樹的底層對象之前捕捉此種類型的事件。

 

2.引入canvas方法

<canvas id="fcanvas" width="500" height="300">

Your browser does not support HTML5 canvas

</canvas>

判斷瀏覽器是否支持canvas

（1）https://modernizr.com/

（2）使用函數判斷

function canvas(){

　　  var canUse=!!document.createElement('canvas').getContext;

　　  if(!canUse){

　　　　return;
　　  }

}

　　

3.包裝console.log函數，防止出現不支持此函數時的錯誤提示

var Debugger=function(){};
Debugger.log=function(message){
     try{
      console.log(message);  
    }catch(exception){
      return;        
  }
}

 

4.動畫循環方法

（1）setTimeout

   

function gameLoop(){
   window.setTimeout(gameLoop,20);
   drawScreen() 
}
gameLoop();

　這種方式每次會清除自己，不會永遠進行下去，比setInterval對性能更好。但是會出現如果某一幀需要大量計算，但是設置的時間並沒有那么長，這樣在進入下一幀動畫的時候，這一幀並沒有完成，這樣會造成丟幀； 如果時間設置太長 =》不流暢、視覺卡頓的問題。

（2）requestAnimationFrame()

   這種方法是瀏覽器自動判斷下一幀的渲染時間，不會跳幀、丟幀，但是並不是所有的瀏覽器都支持。

　根據瀏覽器的性能或者網速快慢來決定，它會保證繪制完這一幀，才會繪制下一幀，保證性能的同時，也保證動畫的流暢。

 

5.使用canvas流程

（0）在html文件上創建canvas標簽的DOM節點

（1）判斷window是否加載完成。

（2）判斷canvas是否支持。

（3）創建context對象

var iCanvas =document.getElementById("canvas");
var iContext=iCanvas.getContext("2d");

（4）開始畫圖。

 

 

以上是開始使用canvas時的准備，在下一篇將介紹canvas的常用api。