谷歌发布了一本电子书:http://www.20thingsilearned.com/
阅读体验很有趣 .
我注意到他们使用画布在阅读区域上产生翻页效果 .
从技术上讲,您可以绘制自定义的形状,填充渐变,装饰阴影 .
但必须使用两条beizer曲线(顶部和底部边缘)和两条直线绘制形状 .
问题是如何动态绘制这两个beizer曲线 . 我花了一整天画这两条曲线 . 这里有一些代码 .
有谁知道如何在谷歌的电子书上产生相同的效果 . 或者我基本上遇到了错误的方向?
/**
* 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;
}
};