HTML5游戏的开发过程中是在浏览器上进行运行调试的，所以首先我们需要建立一个html页面。 其中，我们把所有的canvas都放到一个viewporter（视图）里面，因此，在body中放置了一个id为viewporter的div中。
具体代码如下：
①index_src.html页面
<!DOCTYPE html>
<html>
<head>
<title>SLG Game</title>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head> <body>
<div id="viewporter"></div>
</body>
</html>
②其中，我们需要基本设置一些页面，不然页面光秃秃的，很难看，开发过程中影响心情，所以我们插入了css文件。
@charset "utf-8";
html { -webkit-text-size-adjust: 100%; }
body{ font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif,"宋体";font-size:12px;color:#dfd9c2; margin:; padding:; background: #000; outline:none; cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{margin:; padding:;}
input {font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif,"宋体"; color:#dfd9c2; cursor:default}
canvas,input,button,select,textarea{outline:none;} canvas{position: absolute; left:; top:;}
最后，我们启动Apache,在chrome浏览器中看一下运行效果:
index_src.html中设置到一些meta，具体的一些用途可以去查些资料。