摘要：
HTML5不再是一个新术语。对我来说，最有趣的是它的画布标签，它可以与Javascript结合来绘制游戏屏幕。我们可以在Javascript脚本varcanvas＝document中获取页面中的画布对象及其绘图上下文。按ID获取元素；varcontext=画布。GetContext通常，每个游戏都有一个游戏周期：varFPS=30；setInterval；每个循环将首先执行游戏逻辑、计算对象和更新场景。接下来，我们可以添加事件处理。例如，让游戏响应用户的鼠标单击事件：document。onclick=函数｛o.x=event.pageX canvas.offsetLeft；o.y=event.pageY canvas.ooffsetTop；o.y_speed=0；｝以这种方式，形成了显示动作反馈的闭环。接下来，我将讨论如何使用Selenium和openCV来测试HTML5画布游戏的自动化功能。
HTML5已经不是一个新名词。它看上去很cool，有很多feature，大多数人普遍看好它的发展。对于我来说，最感兴趣的是它的canvas标签，可以结合Javascript来绘制游戏画面。
我们可以在Javascript脚本中获得页面中的canvas对象，以及它的绘图上下文：
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")通常每个游戏会有游戏循环：
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);每次循环的时候会先执行游戏逻辑，计算对象，更新场景。比如说场景里有个对象在做自由落体运动。你就需要不断地计算并更新它的位移，速度。
function update () {
o.y += o.y_speed;
o.y_speed += o.y_acceleration;
}更新完场景后需要擦除并重新绘制场景。
function draw() {
context.fillStyle = '#000000';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#2222ff';
context.fillRect(o.x - o.width/2, o.y - o.height/2, o.width, o.height);
}更新和绘制场景的速度可能会影响到FPS。
接下来，我们可以添加事件处理，比如说让游戏响应用户鼠标点击事件：
document.onclick = function(event){
o.x = event.pageX - canvas.offsetLeft;
o.y = event.pageY - canvas.offsetTop;
o.y_speed = 0;
}这样就形成了显示-动作-反馈的closed loop。
这些是最基本的游戏工作原理。当然我们知道要完成一个游戏是有很多工作需要做的，涉及到很多领域。先表过不提。接下去我会谈一下如何使用Selenium和 openCV对HTML5 canvas游戏进行自动化功能测试。