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

Javascript Image Loader DemoĐố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:

Javascript Image Loader Demo

YinYangIt’s Blog

Advertisements

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

  1. Mọi người cho mình hỏi có cách nào lưu video sau khi đã xử lý trong canvas. Ý mình là mình có 1 video bình thường, mình xử lý sang dạng video đen trắng trong canvas và lưu lại cái video đã xử lý ở ngay trong canvas đó thành video đen trắng để lưu trữ trên máy tính thì làm thế nào.
    Mong mọi người giúp đỡ.
    Cảm ơn nhiều

    Trả lời
  2. Bạn cần phân biệt Canvas và video, video thì chỉ có thể vẽ lên canvas rồi chỉnh sửa canvas chứ không chỉnh sửa video được. Ngoài ra thì canvas hiển thị hình ảnh tĩnh chứ không phải ảnh động hay video. Bạn chỉ có thể lưu từng tấm ảnh thôi.

    Trả lời

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s