前一段時間專案組裡有一些h5動畫的需求，由於沒有專業的前端人員，便交由我這個做後台的研究相關的h5動畫技術。
通過初步調研，h5動畫的實現大概有以下幾種方式：
1、基於css實現
這種方式比較簡單易學，但是能實現的效果也相對簡單。一般都是對h5元素的平移，旋轉，縮放等。適用於網頁中的一些簡單動畫，對於由許多元素相互聯絡的複雜動畫實現起來有些難度。當然也有基於css實現的比較複雜的動畫（如：人物的行走），但是難度比較大。css動畫教程：
2、基於jquery實現
jquery中提供了一些api對h5元素進行操作，主要也是平移、旋轉、縮放；還有一些出入效果（如淡入淡出等）。使用起來比較簡單，適用場景與css基本相同，在做一些需要和使用者互動的簡易動畫時比css更簡單易用些。
3、基於js與canvas實現
canvas是h5提供的一種繪圖元素，可以使用js控制，繪製點、線、面、影象、h5元素等。同時也支援對所繪製物件的平移、旋轉、裁剪等，並且繪製速度還是比較快的；在平移，旋轉上略有侷限性，一方面實現起來並不方便，繪製平移旋轉的實質是對畫布座標系進行平移，旋轉，繪製完成之後，需要將畫布座標系復原，並且不支援z軸旋轉。
理論上來說基於js與canvas可以做任何形式的動畫，但是需要自己去實現很多東西，比如碰撞檢測，粒子系統等，這些工作量還是比較大的。有很多熱心開發人員寫了一些基於js與canvas的動畫引擎，實現了相當贊的效果。但這些引擎都有一定的侷限性，一方面是由於封裝導致各個引擎之間不能配合使用，而各個引擎實現的並不完善，只是側重與某一方面，有的側重於碰撞效果，有的側重與彈性約束之間的物理效果。
4、基於一些功能比較完善的物理引擎如cocos2d、白鷺等
這種方式就可以做出非常炫的效果，但是需要具備一些物理引擎的基礎知識，包括座標變換等一些數學知識。一般來說這種技術都是乙個單獨的研究方向，學好了薪資很高的。但使用這種技術做動畫一般都是需要乙個團隊的，有主程、美工等多個專業人員一起做。
通過技術評估及我們的需求，決定採用第三種方式，並且自己結合需求，實現了乙個簡易的動畫引擎。目前開發工作已經初步完成，基於js+canvas的引擎**已經放置github上（基於該引擎可以方便的實現：
①點線面等簡單圖形以及的繪製api，並且很方便的就可以實現旋轉、平移、縮放（解決了原生canvas的部分侷限性）
②基於雪碧圖，可以很方便的實現序列幀動畫
③簡易的碰撞檢測
④該引擎在封裝的時候，考慮了可擴充套件性，可以很好的擴充套件其他特性（如重力效果）
歡迎**收藏！！
js小遊戲 小球走迷宮（基於h5 canvas）
小球走迷宮遊戲的實現比接元寶要簡單的多，迷宮地圖可以說是由乙個二維陣列組成的，0代表沒有障礙物，1代表有障礙物，小球從 0,0 位置開始出發，走到指定位置則遊戲勝利，遇到障礙物則不能通過，可以看做乙個點在陣列的 0,0 位置開始向上或向右或向下或向左來 走 陣列，因為是人為控制小球，所以只需要判斷小...
移動端Canvas畫板簽名（原生js）
首先建立畫布 乙個用來顯示觸屏區域 清空，生成兩個按鈕 img顯示生成的 清空生成 mycanvas operation position canvasimg 給畫布新增touch觸控事件 用來獲取 當前觸控的座標點相對於畫布的位置,但在實現過程中發現touch座標點一直是相對body的位置 解決方...
H5新特性Canvas繪製二叉樹 原生js
1.css內容 html,body btn 2.html內容 canvas canvas class btn onclick draw 畫樹button 3.js內容 var canvas document.getelementbyid canvas var ctx canvas.getcontex...