『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.lineWi