如何在Canvas中制作这样的翻页效果呢？

Question

google 出版了一本电子书：http://www.20thingsilearned.com/

阅读体验是这样的乐趣。

我注意到他们使用画布在阅读区域上产生翻页效果。

从技术上讲，您可以绘制自定义形状，填充渐变，装饰阴影。

但形状必须用两条贝泽曲线（用于顶部和底部边缘）和两条直线绘制。

问题是如何动态绘制这两条贝泽曲线。我花了一整天的时间来画这两条曲线。这是一些代码。

有谁知道如何在谷歌的电子书上产生同样的效果。 或者我基本上跑错了方向？

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