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:0; padding:0; 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:0; padding:0;} input {font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif,"宋体"; color:#dfd9c2; cursor:default} canvas,input,button,select,textarea{outline:none;} canvas{position: absolute; left: 0; top: 0;}
最后，我们启动Apache,在chrome浏览器中看一下运行效果:
index_src.html中设置到一些meta，具体的一些用途可以去查些资料。