簡介
2010 年，F-i.com 與 Google Chrome 團隊合作，共同開發一款以 HTML5 為基礎的教育性網路應用程式，名為「20 Things I Learned about Browsers and the Web」(www.20thingsilearned.com)。這個專案的其中一個重要概念，就是最好以書籍的形式呈現。由於本書內容主要講述開放式網路技術，我們認為，讓容器本身成為這些技術可協助我們達成的現今成就範例，是保持一致性的關鍵。
我們認為，要讓使用者有閱讀實體書的感受，最好的方法就是模擬類比閱讀體驗的優點，同時在導覽等領域運用數位領域的優點。我們花了許多心力，以圖像和互動方式處理閱讀流程，特別是書頁的翻頁方式。
開始使用
本教學課程將逐步說明如何使用畫布元素和大量 JavaScript 建立自訂的頁面翻頁效果。本文的程式碼片段中省略了一些基本程式碼，例如變數宣告和事件事件監聽器訂閱，因此請記得參考實際運作的範例。
開始之前，建議您查看示範影片，瞭解我們要建構的內容。
標記
請務必記住，我們在畫布上繪製的內容無法由搜尋引擎編入索引、由訪客選取，或透過瀏覽器內搜尋找到。因此，我們將直接將要使用的內容放入 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 中設定，因此如果您想變更書籍的大小，也必須更新該處的值。
接下來，我們需要為每個頁面定義翻頁物件，這些物件會在我們與書籍互動時持續更新，以反映翻頁的目前狀態。
// 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 索引，確保頁面正確分層，讓第一個頁面位於頂端，最後一個頁面位於底部。翻轉物件最重要的屬性是 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，看看是否有任何 flips 被標示為 dragging，並且現在應釋出。當翻轉功能釋放時，我們會根據目前滑鼠的位置，將目標值設為與應翻轉的方向相符。頁碼也會更新，以反映此導覽。
轉譯
既然大部分的邏輯都已就定位，我們就來瞭解如何將折疊紙算繪至畫布元素。這類事件大多發生在 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 規格