简介
2010 年，F-i.com 与 Google Chrome 团队合作开发了一款基于 HTML5 的教育类 Web 应用，名为“20 件我学到的关于浏览器和 Web 的事”(www.20thingsilearned.com)。 此项目背后的一个关键理念是，最好以图书的形式呈现该项目。 由于本书的内容主要涉及开放网络技术，因此我们认为，让容器本身成为这些技术在当今能够实现的目标的示例，对于保持本书的真实性至关重要。
我们认为，要营造出真实世界中实体书的感觉，最好的方法是模拟模拟阅读体验的优点，同时在导航等领域利用数字领域的优势。我们投入了大量精力来处理阅读流程的图形和互动效果，尤其是图书页面从一页翻到另一页的方式。
使用入门
本教程将引导您完成使用 canvas 元素和大量 JavaScript 创建自己的翻页效果的过程。本文中的代码段省略了一些基本代码，例如变量声明和事件监听器订阅，因此请务必参考有效的示例。
在开始之前，最好先查看演示，以便了解我们打算构建的内容。
Markup
请务必注意，我们在画布上绘制的内容无法被搜索引擎编入索引，也无法被访问者选择或通过浏览器内搜索找到。因此，我们将直接在 DOM 中放置要处理的内容，然后通过 JavaScript（如果可用）来操作这些内容。所需的标记非常少：
<div id='book'>
<canvas id='pageflip-canvas'></canvas>
<div id='pages'>
<section>
<div> <!-- Any type of contents here --> </div>
</section>
<!-- More <section>s here -->
</div>
</div>
我们为图书设置了一个主要容器元素，该元素又包含图书的不同页面以及我们将要在其上绘制翻页效果的 canvas 元素。在 section 元素内，有一个用于放置内容的 div 封装容器 - 我们需要此封装容器，以便能够在不影响内容布局的情况下更改网页的宽度。div 的宽度固定，section 设置为隐藏其溢出部分，这会导致 section 的宽度充当 div 的水平遮罩。
逻辑
为翻页提供支持所需的代码不是很复杂，但由于涉及大量程序化生成的图形，因此代码量相当大。我们先来看看将在整个代码中使用的常量值的说明。
var BOOK_WIDTH = 830;
var BOOK_HEIGHT = 260;
var PAGE_WIDTH = 400;
var PAGE_HEIGHT = 250;
var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
var CANVAS_PADDING = 60;
在画布周围添加了 CANVAS_PADDING，以便在翻页时纸张可以延伸到书本之外。请注意，此处定义的一些常量也在 CSS 中设置，因此如果您想更改图书的大小，还需要更新 CSS 中的相应值。
接下来，我们需要为每个页面定义一个翻页对象，当我们与图书互动时，这些对象会不断更新，以反映当前的翻页状态。
// Create a reference to the book container element
var book = document.getElementById( 'book' );
// Grab a list of all section elements (pages) within the book
var pages = book.getElementsByTagName( 'section' );
for( var i = 0, len = pages.length; i < len; i++ ) {
pages[i].style.zIndex = len - i;
flips.push( {
progress: 1,
target: 1,
page: pages[i],
dragging: false
});
}
首先，我们需要通过整理各个部分元素的 z-index 来确保页面分层正确，以便第一个页面位于顶部，最后一个页面位于底部。翻转对象最重要的属性是 progress 和 target 值。这些值用于确定页面当前应折叠的程度，-1 表示完全向左折叠，0 表示书的中心位置，+1 表示书的最右边缘。
现在，我们已经为每个页面定义了一个翻转对象，接下来需要开始捕获并使用用户输入来更新翻转的状态。
function mouseMoveHandler( event ) {
// Offset mouse position so that the top of the book spine is 0,0
mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
mouse.y = event.clientY - book.offsetTop;
}
function mouseDownHandler( event ) {
// Make sure the mouse pointer is inside of the book
if (Math.abs(mouse.x) < PAGE_WIDTH) {
if (mouse.x < 0 && page - 1 >= 0) {
// We are on the left side, drag the previous page
flips[page - 1].dragging = true;
}
else if (mouse.x > 0 && page + 1 < flips.length) {
// We are on the right side, drag the current page
flips[page].dragging = true;
}
}
// Prevents the text selection
event.preventDefault();
}
function mouseUpHandler( event ) {
for( var i = 0; i < flips.length; i++ ) {
// If this flip was being dragged, animate to its destination
if( flips[i].dragging ) {
// Figure out which page we should navigate to
if( mouse.x < 0 ) {
flips[i].target = -1;
page = Math.min( page + 1, flips.length );
}
else {
flips[i].target = 1;
page = Math.max( page - 1, 0 );
}
}
flips[i].dragging = false;
}
}
mouseMoveHandler 函数会更新 mouse 对象，以便我们始终朝着最新的光标位置努力。
在 mouseDownHandler 中，我们首先检查鼠标是否按在左侧或右侧页面上，以便了解我们想要开始翻页的方向。我们还会确保该方向上存在另一个页面，因为我们可能位于第一页或最后一页。如果在这些检查之后有有效的翻转选项可用，我们会将相应翻转对象的 dragging 标志设置为 true。
一旦达到 mouseUpHandler，我们就会遍历所有 flips，并检查是否有任何 dragging 标记的 flips 现在应该发布。当翻转释放时，我们会根据当前鼠标位置设置其目标值，以匹配应翻转到的侧面。页面编号也会更新，以反映此导航。
渲染
现在，我们的大部分逻辑都已到位，接下来我们将介绍如何将折叠纸张渲染到画布元素上。大部分操作都在 render() 函数内完成，该函数每秒调用 60 次，用于更新和绘制所有有效翻转的当前状态。
function render() {
// Reset all pixels in the canvas
context.clearRect( 0, 0, canvas.width, canvas.height );
for( var i = 0, len = flips.length; i < len; i++ ) {
var flip = flips[i];
if( flip.dragging ) {
flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
}
// Ease progress towards the target value
flip.progress += ( flip.target - flip.progress ) * 0.2;
// If the flip is being dragged or is somewhere in the middle
// of the book, render it
if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
drawFlip( flip );
}
}
}
在开始渲染 flips 之前，我们使用 clearRect(x,y,w,h) 方法重置画布。清除整个画布会带来很大的性能开销，因此仅清除我们正在绘制的区域会更加高效。为了使本教程不偏离主题，我们只介绍如何清除整个画布。
如果正在拖动翻转，我们会更新其 target 值，使其与鼠标位置相匹配，但采用 -1 到 1 的比例，而不是实际像素。
我们还会将 progress 增加到 target 的一部分距离，由于它会在每一帧上更新，因此会实现平滑的翻转动画效果。
由于我们会在每一帧中遍历所有 flips，因此需要确保仅重绘处于活跃状态的 flips。如果翻转位置与书本边缘的距离不太近（在 BOOK_WIDTH 的 0.3% 以内），或者如果翻转位置被标记为 dragging，则会被视为有效。
现在，所有逻辑都已到位，我们需要根据翻转的当前状态绘制其图形表示。现在，我们来看看 drawFlip(flip) 函数的第一部分。
// Determines the strength of the fold/bend on a 0-1 range
var strength = 1 - Math.abs( flip.progress );
// Width of the folded paper
var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );
// X position of the folded paper
var foldX = PAGE_WIDTH * flip.progress + foldWidth;
// How far outside of the book the paper is bent due to perspective
var verticalOutdent = 20 * strength;
// The maximum widths of the three shadows used
var paperShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(1 - flip.progress, 0.5), 0);
var rightShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0);
var leftShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0);
// Mask the page by setting its width to match the foldX
flip.page.style.width = Math.max(foldX, 0) + 'px';
此部分代码首先计算一些我们需要以逼真方式绘制折叠效果的视觉变量。我们绘制的翻转的 progress 值在这里起着重要作用，因为我们希望页面折叠出现在这里。为了增加翻页效果的深度，我们让纸张延伸到书本顶部和底部边缘之外，当翻页接近书脊时，此效果达到峰值。
现在，所有值都已准备就绪，剩下的就是绘制纸张了！
context.save();
context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
// Draw a sharp shadow on the left side of the page
context.strokeStyle = `rgba(0,0,0,`+(0.05 * strength)+`)`;
context.lineWidth = 30 * strength;
context.beginPath();
context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
context.stroke();
// Right side drop shadow
var rightShadowGradient = context.createLinearGradient(foldX, 0,
foldX + rightShadowWidth, 0);
rightShadowGradient.addColorStop(0, `rgba(0,0,0,`+(strength*0.2)+`)`);
rightShadowGradient.addColorStop(0.8, `rgba(0,0,0,0.0)`);
context.fillStyle = rightShadowGradient;
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX + rightShadowWidth, 0);
context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
context.lineTo(foldX, PAGE_HEIGHT);
context.fill();
// Left side drop shadow
var leftShadowGradient = context.createLinearGradient(
foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
leftShadowGradient.addColorStop(0, `rgba(0,0,0,0.0)`);
leftShadowGradient.addColorStop(1, `rgba(0,0,0,`+(strength*0.15)+`)`);
context.fillStyle = leftShadowGradient;
context.beginPath();
context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
context.lineTo(foldX - foldWidth, 0);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
context.fill();
// Gradient applied to the folded paper (highlights & shadows)
var foldGradient = context.createLinearGradient(
foldX - paperShadowWidth, 0, foldX, 0);
foldGradient.addColorStop(0.35, `#fafafa`);
foldGradient.addColorStop(0.73, `#eeeeee`);
foldGradient.addColorStop(0.9, `#fafafa`);
foldGradient.addColorStop(1.0, `#e2e2e2`);
context.fillStyle = foldGradient;
context.strokeStyle = `rgba(0,0,0,0.06)`;
context.lineWidth = 0.5;
// Draw the folded piece of paper
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX, PAGE_HEIGHT);
context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2),
foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
context.lineTo(foldX - foldWidth, -verticalOutdent);
context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);
context.fill();
context.stroke();
context.restore();
画布 API 的 translate(x,y) 方法用于偏移坐标系，以便我们可以绘制翻页效果，并将书脊顶部作为 0,0 位置。请注意，我们还需要 save() 画布的当前转换矩阵，并在完成绘制后将其 restore()。
foldGradient 是我们将用于填充折叠纸张形状的颜色，以赋予其逼真的高光和阴影。我们还在纸质绘画周围添加了一条非常细的线条，这样纸张在浅色背景下就不会消失。
现在，剩下的就是使用我们上面定义的属性绘制折叠纸张的形状。纸张的左右两侧绘制为直线，而顶部和底部则绘制为曲线，以营造纸张弯曲折叠的感觉。此纸张弯曲的强度由 verticalOutdent 值决定。
大功告成！现在，您已拥有可正常运行的翻页导航。
翻页演示
翻页效果旨在传达正确的互动感，因此仅查看相关图片并不能完全体现其效果。
后续步骤
这只是利用画布元素等 HTML5 功能可以实现的一个示例。我建议您访问 www.20thingsilearned.com，了解更精细的图书体验，本技巧正是摘自该体验。您将看到如何在实际应用中应用翻页效果，以及当它与其他 HTML5 功能搭配使用时会变得多么强大。
参考
- Canvas API 规范