为提高游戏体验，在游戏启动时会预先加载游戏使用的资源，同时显示一个表示资源加载完成百分比的进度条。那么我们该如何实现这种效果呢？来，我来手把手教你实现。
首先，我们看一下HTML页面代码
注意$(function(){……})中的代码，表示页面加载完毕后执行，效果和<body>标签中的onload一样。
此函数中主要代码执行流程：首先初始化canvas，然后加载资源，接下来绘制游戏画面，即执行runGame()函数。
initCanvas()函数创建并初始化canvas，代码如下：
此函数主要做了以下几件事：1、判断绘图客户区大小是否小于设计分辨率（400×600）；2、缩放设计绘图区并计算绘图区在canvas中的开始坐标；3、修改canvas宽度和高度；4、用指定颜色清除canvas（即填充canvas）。
loadResource()即为加载资源的函数，代码如下:
函数功能比较简单，依次对资源数组中的每一项执行预加载，new一个Image对象，然后修改src属性为要加载的资源路径，onload()函数的代码在预加载完毕后执行，即每预加载完一个资源就将加载的数量+1。
最后，我们看看drawScene()函数的代码
根据当前游戏状态绘制游戏画面，目前我们只实现资源加载状态，所以只处理一种状态，随着游戏功能不断完善，此函数的代码也随之完善，我们接着看一看游戏状态的相关代码
目前只定义了4种游戏状态，我们再接着看一看drawLoading()函数的关键代码
首先计算进度条左上角x,y坐标，接着计算资源加载完成百分比，然后用红色画进度条边框，根据加载完成百分比，用蓝色画进度条，最后用白色显示加载完成百分比。最终运行效果如下
最后简单录了个视频，回顾了相关的实现细节（点击链接观看）