html5已經不是乙個新名詞。它看上去很cool，有很多feature，大多數人普遍看好它的發展。對於我來說，最感興趣的是它的canvas標籤，可以結合j**ascript來繪製遊戲畫面。
我們可以在j**ascript指令碼中獲得頁面中的canvas物件，以及它的繪圖上下文：
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d")
通常每個遊戲會有遊戲迴圈：
var fps = 30;每次迴圈的時候會先執行遊戲邏輯，計算物件，更新場景。比如說場景裡有個物件在做自由落體運動。你就需要不斷地計算並更新它的位移，速度。setinterval(function() , 1000/fps);
function update ()更新完場景後需要擦除並重新繪製場景。
function draw()更新和繪製場景的速度可能會影響到fps。
接下來，我們可以新增事件處理，比如說讓遊戲響應使用者滑鼠點選事件：
document.onclick = function(event)這樣就形成了顯示-動作-反饋的closed loop。
這些是最基本的遊戲工作原理。當然我們知道要完成乙個遊戲是有很多任務作需要做的，涉及到很多領域。先表過不提。接下去我會談一下如何使用selenium和 opencv對html5 canvas遊戲進行自動化功能測試。
HTML5 canvas製作遊戲接住小球
遊戲的整體邏輯是隨機在上面生成障礙物，當小球碰到障礙物時障礙物消失，當全部障礙物被消滅時贏得遊戲，而當小球掉到木板以下則輸掉遊戲。先從頁面說起，比較簡單的 只有乙個div乙個canvas，就不多做解釋了。然後是遊戲介面，小球和木板部分我定義了全域性變數來儲存他們的左上角座標，因為這個座標是不斷變化的...
用HTML5 canvas製作簡單遊戲
裡面是通過js動態建立的畫布，大家也可以直接在html頁面上先建立畫布，然後再通過document.getelementbyid 來獲取，這兩種方法沒有什麼區別，只是看你更習慣哪一種。var canvas document.createelement canvas var ctx canvas.ge...
HTML5 canvas 繪製圓形
canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如 arc x,y,radius,startangle,endangle,countercl...