Đố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
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
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.
Em muốn load thêm audio thì làm sao anh?
Audio có cơ chế load khác image bởi vì nó có thể được sử dụng trước khi load xong (giống như khi bạn coi phim trực tiếp, mặc dù chưa load xong nhưng bạn vẫn coi được). Bạn có thể tạo thẻ audio có attribute là preload (http://www.w3schools.com/html5/att_audio_preload.asp). Hoặc sử dụng event oncanplaythrough thay cho event onload của image.