How to produce such page flip effects in Canvas? - html

Question

google has published an e-book : http://www.20thingsilearned.com/
the reading experience is kind of fun.
I notice they used canvas to produce the page flip effects over reading areas.
Technically, you can draw a customized shape, filled with gradient, decorated with shadow.
but the shape has to be drawn with two beizer curves (for top and bottom edges) and two straight lines.
The problem is how to dynamically draw those two beizer curves. I spent a whole day to draw these two curves. here is some code of.
Does anyone knows how to produce the same effects on Google's ebook.
or i basically ran into wrong direction?
/**
* PageFlip effects using HTML Canvas
* #author RobinQu
* #version 0.1
*/
/*global x$ */
var elf = {};
elf.fx = {};
elf.fx.pageflip = {
/**
* initialize the pageflip
* #param {String} cId The id of canvas element
*/
init: function(cId, width, height) {
var canvas,
ctx;
this.$ = x$("#" + cId);
canvas = this.canvas = this.$[0];
this.width = canvas.width = width;
this.height = canvas.height = height;
this.margin = 60;
this.context = canvas.getContext("2d");
//this.bind();
},
bind: function() {
this.$.on("mouseover", this.beginRoll.bind(this));
this.$.on("mousemove", this.doRoll.bind(this));
this.$.on("mouseout", this.endRoll.bind(this));
},
_over: false,
beginRoll: function() {
this._over = true;
},
_clear: function() {
var ctx = this.context;
ctx.clearRect(0, 0, this.width, this.height);
var w = this.width;
this.canvas.width = 1;
this.canvas.width = w;
},
doRoll: function(e) {
//offset, plus scroll; client, no scroll
if (this._over) {
//console.log(e.offsetX, e.offsetY, e.clientX, e.clientY);
var x = e.offsetX,
y = e.offsetY,
ctx = this.context,
startx = x,
starty = x / this.width * this.margin,
endx = (this.width - x)/2 + x,
endy = this.margin + 8,
cp1x = x + 10,
cp1y = Math.min(this.margin * Math.sin(x * Math.PI / this.width), 5),
cp2x = endx - 10,
cp2y = Math.min(this.margin * Math.cos(x * Math.PI / this.width), 5);
console.log(this.margin * Math.sin(x * Math.PI / this.width));
//enxy = this.margin * Math.sin(x * Math.PI * 2 / this.width),
//cp2x = ;
console.log(this.width, this.height);
this._clear();
ctx.beginPath();
ctx.moveTo(startx, starty);
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, endx, endy);
ctx.strokeStyle = "#000";
ctx.stroke();
}
},
endRoll: function() {
this._over = false;
}
};