小編以一個運動的小車為例子，講述了三種實現HTML5動畫的方式，思路清晰，動畫不僅僅是canvas，還有css3和javascript.通過合理的選擇，來實現最優的實現。 

PS：由于顯卡、錄制的幀間隔，以及可能你電腦處理器的原因，播放過程可能有些不太流暢或者失真！ 
分三種方式實現： 
(1) canvas元素結合JS 
(2) 純粹的CSS3動畫（暫不被所有主流瀏覽器支持，比如IE） 
(3) CSS3結合Jquery實現 
知道如何使用CSS3動畫比知道如何使用<canvas>元素更重要：因為瀏覽器能夠優化那些元素的性能(通常是他們的樣式，比如CSS)，而我們使用canvas自定義畫出來的效果卻不能被優化。原因又在于，瀏覽器使用的硬件主要取決于顯卡的能力。目前，瀏覽器沒有給予我們直接訪問顯卡的權力，比如，每一個繪畫操作都不得不在瀏覽器中先調用某些函數。 
1.canvas 
html代碼： 
 

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表