yetangitu/canvas-based-HTML5-Comic-Book-Reader
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

initial commit, basic ComicBook class structure, image preloading, single page display (no navigation) done.

Browse source
This commit is contained in:
Bala Clark 2010-07-06 09:38:00 +01:00
commit ab01d45ea1
3 changed files with 98 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

77
scripts.js Normal file
View file

@ -0,0 +1,77 @@
var book;
window.onload = function() {
book = new ComicBook();
var srcs = [
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/00.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/01.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/02.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/03.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/04.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/05.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/06.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/07.jpg"
];
book.draw("comic", srcs);
}
function ComicBook() {
var pages = [];
var canvas;
var context;
var buffer = 10;
var pointer = 0;
console.log("init");
this.draw = function(elm, srcs) {
// setup canvas
canvas = document.getElementById(elm);
context = canvas.getContext("2d");
// set full width
//canvas.width = document.body.clientWidth;
preload(srcs);
}
this.drawPage = function() { drawPage(); }
/**
* TODO: break this down into drawSinglePage() & drawDoublePage()
*/
function drawPage() {
var page = pages[pointer];
canvas.width = page.width;
canvas.height = page.height;
context.drawImage(page, 0, 0);
}
function preload(srcs) {
var loaded = 0;
if (srcs.length < buffer) buffer = srcs.length; // don't get stuck if the buffer level is higher than the number of pages
srcs.forEach(function(src){
var page = new Image();
page.src = src;
page.onload = function() {
pages[loaded] = this; loaded++;
if (loaded == buffer) drawPage();
}
});
}
}