HTML5 – Canvas: Nạp trước hình ảnh và tài nguyên

Đối với những game sử dụng nhiều hình ảnh (âm thanh, video,…), ta cần phải nạp toàn bộ các ảnh cần thiết trước khi vào game. Bài viết này cung cấp một giải pháp đơn giản cho việc nạp trước các hình ảnh để sử dụng trong một canvas game.

Từ ví dụ ở trang HTML5 Canvas Image Loader Tutorial, tôi bổ sung thêm event cho phép cập nhật tiến trình nạp ảnh (onProgressChanged). Dựa vào cách này, bạn cũng có thể thay đổi để giúp việc nạp và quản lý các loại tài nguyên khác được thuận tiện:

function ImgLoader(sources,onProgressChanged,onCompleted) {
	this.images = {};
	var loadedImages = 0;
	var totalImages = 0;
	// get num of sources
	if(onProgressChanged || onCompleted)
		for(var src in sources) {
			  totalImages++;
		}
        var self = this;
	for(var src in sources) {
	  this.images[src] = new Image();
	  this.images[src].onload = function() {
		loadedImages++;
		if(onProgressChanged)
		{
			var percent = Math.floor((loadedImages/totalImages)*100);
			onProgressChanged(this,percent);
		}
		if(onCompleted && loadedImages >= totalImages)
			onCompleted(self.images);
	  }
	  this.images[src].src = sources[src];
	}
}

Cách sử dụng:

window.onload = function(images) {
	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");
	var barWidth = 200;
	var barLeft = (canvas.width-barWidth)/2;
	context.fillRect(barLeft,10,barWidth,18);
	context.fillStyle = "blue";
	var sources = {
	  img1: "Spring/img (1).jpg",
	  img2: "Spring/img (2).jpg",
	  img3: "Spring/img (3).jpg",
	  img4: "Spring/img (4).jpg",
	  img5: "Spring/img (5).jpg",
	  img6: "Spring/img (6).jpg",
	};
	var left = 100;

	var foo = new ImgLoader(sources,
		function(image,percent) {
			context.drawImage(image, left, 55, 50,50);
			//context.clearRect(0,0,200,30);
			context.fillStyle = "blue";
			context.fillRect(barLeft,12,percent*barWidth/100,12);
			context.fillStyle = "white";
			context.fillText("Loading: "+percent+"%",barLeft+10,22);
			left+=60;
		},
		function(images){
			// completed
		}
	);
};

Minh họa:

YinYangIt’s Blog

Advertisements