Как создать такие эффекты переворачивания страницы в Canvas?

Question

Google опубликовал электронную книгу: http://www.20thingsilearned.com/

чтение очень забавное.

Я заметил, что они использовали canvas для создания эффектов перелистывания страниц над областями чтения.

Технически, вы можете нарисовать индивидуальную фигуру, заполненную градиентом, украшенную тенью.

, но фигура должна быть нарисована с помощью двух кривых Бейзера (для верхнего и нижнего краев) и двух прямых.

Проблема в том, как динамически нарисовать эти две кривые Бейзера.Я потратил целый день, чтобы нарисовать эти две кривые.Вот некоторый код.

Кто-нибудь знает, как произвести такой же эффект на электронную книгу Google.или я в основном бежал в неправильном направлении?

/**
 * 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;
    }
};