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

17
reader.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Canvas Test</title>
<link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/master/blueprint/src/reset.css">
<link rel="stylesheet" href="styles.css" media="screen, projection">
<script src="scripts.js"></script>
</head>
<body>
<canvas id="comic">get a better browser, fool.</canvas>
</body>
</html>

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();
}
});
}
}

4
styles.css Normal file
View file

@ -0,0 +1,4 @@
canvas {
background-color: #ddd;
width: 100%;
}