『HTML5游戏开发』加载图片和显示进度条

本篇将帮助大家学会游戏中用html5设置进度条。

游戏中第一眼看到的就应该是进度条，一般进度条是把图片加载进来，然后随着加载图片的数量画出相应的进度。那么html5究竟是如何加载图片的呢？接下来由我一步步地为大家揭晓。

初始画面

window.onload = function(){
progress();
};

首先我们要在画面上画一个进度条的边框和几个字，所以当页面加载时就调用绘制函数progress，progress()里的内容如下

function progress(){
var pElem = document.getElementById("mycanvas");
var pCtx = pElem.getContext('2d');

//定义框架的样式
pCtx.beginPath();
pCtx.lineWidth = "5";
pCtx.strokeStyle = "dimgray";
pCtx.fillStyle = "lightgray";
pCtx.lineJoin = "round";

//画矩形，长为550-250=300，宽为270-240=30
pCtx.moveTo(250, 240);
pCtx.lineTo(550, 240);
pCtx.lineTo(550, 270);
pCtx.lineTo(250, 270);

pCtx.closePath();
pCtx.fill();
pCtx.stroke();

//添加进度条的文字
pCtx.beginPath();
pCtx.lineWidth = "2";
pCtx.font = "bold 32pt Tahoma";
pCtx.strokeText("loading……", 280, 200);
pCtx.fillStyle = "white";
pCtx.fill();
pCtx.stroke();
}

注释写得很明了，大家应该能看注释就能看懂吧。实在不了解的朋友就只好去看看w3cschool上写的了。地址如下：http://www.w3school.com.cn/html5/html5_ref_canvas.asp

页面初始化完毕后就要加载图片了，接下来让我们来看看如何加载图片。

加载图片

首先我们定义一个用来装图片的数组，并向里面装图片：

//建立要加载的图片数组
var loadpic1 = "./item1.jpg";
var loadpic2 = "./item2.jpg";
var loadpic3 = "./item3.jpg";
var loadpic4 = "./item4.jpg";
var loadpic5 = "./item5.jpg";
var loadpic6 = "./item6.jpg";
var loadPicArr = [loadpic1, loadpic2, loadpic3, loadpic4, loadpic5, loadpic6];

很显然，一共有6张要加载的图片。我们把图片放进数组，是为了方面加载，加载时用一个循环就可以搞定。

//循环加载图片
for(var i=0; i<loadPicArr.length; i++){
var onloadPic = new Image();
onloadPic.src = loadPicArr[loadSub];
onloadPic.onload = function(){
setTimeout(function(){drawProgress();loadSub ++;}, 1000+addTime);
//增加等待时间，也就是说每加载一张就用等500ms
addTime+=500;
};
}

在上面代码中，我们先遍历装满图片的数组，然后创建一个Image，并且给他的图片地址设定为遍历到的下标所对应的地址。接下来，当图片加载时，就等待500画一次进度条。这样就可以边加载图片，边画进度条。

绘画进度条

首先我们需要几个变量，用这些变量来确定绘制的位置

//设定要开始画进度的X坐标
var startX = 252;
//设定没加载一张要画的长度
var addX = 296/loadPicArr.length;
var addtoX = startX;

值得注意的是，每次要显示的进度就是进度条总长度256除以图片数量。这样的话就可以让增加的进度自动适应图片数量。addtoX与进度要到达的X坐标有关系，它初始值为252，并会随着进度增加而变化。

接下来看看drawProgress函数

//画出进度
function drawProgress(){
//增加进度长度
addtoX+=addX;

var dElem = document.getElementById("mycanvas");
var dCtx = dElem.getContext('2d');

//设定样式
dCtx.beginPath();
dCtx.lineWidth = "26";
dCtx.strokeStyle = "orange";
dCtx.lineJoin = "round";
//开始绘制
dCtx.moveTo(startX, 255);
dCtx.lineTo(addtoX, 255);
dCtx.stroke();
}

其中，我们每加载一张图片就会增加进度要到的位置，然后用起始左标连线这个位置。让进度互相覆盖。但由于颜色相同，高度相同，所以看不出覆盖效果。也就是说每次画的长度并不相同，但增加的长度是相同的。

加载图片和显示进度条就完成了。

以下是几张截图：

代码下载

下载地址：http://download.csdn.net/download/theera_wpyh/5148033

-------------------------------------------------------------

欢迎大家关注我的博客，也欢迎大家来转载我的文章

转载请注明：转自TheEra's Magic Box

Blog地址：http://blog.csdn.net/TheEra_Wpyh



文章地址：/article/10108577.html