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

最新推荐文章于 2024-09-22 14:04:58 发布

Shin-TheEra

最新推荐文章于 2024-09-22 14:04:58 发布

阅读量7.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 & Javascript 游戏开发文章标签： html5 游戏开发加载图片显示进度条

本文链接：https://blog.youkuaiyun.com/TheEra_Wpyh/article/details/8681360

本文介绍了如何在HTML5游戏中实现图片加载及进度条显示。通过创建图片数组并逐张加载，同时更新进度条，达到边加载边显示进度的效果。详细步骤包括初始化、图片加载和进度条绘制，并提供了代码下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇将帮助大家学会游戏中用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.str