HTML5 翻頁翻書效果是一種很常見的網頁設計效果，也是網頁美化的一種方式。下面，我們來一起學習如何編寫HTML5翻頁翻書效果的代碼。 首先，在HTML5中，我們需要使用canvas來繪制翻頁翻書效果。下面是一段HTML5的canvas標簽代碼：

然后，在JS代碼中，我們需要定義一個Book對象，并在該對象中實現頁面翻轉的方法。下面是一段JS代碼：

var Book = function(canvas) {
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var n = 8; // 頁面數
var gap = w / (n + 1);
var np = []; // 每個頁面的坐標
for (var i = 0; i< n; i++) {
np.push({x: gap * (i + 1), y: h / 2});
}
var anim = 0; // 動畫進度
var dir = 0; // 翻頁方向
var p0, p1; // 翻頁開始與結束的坐標
var t = 0; // 每個頁面的角度
function draw() {
ctx.fillStyle = "#ddd";
ctx.fillRect(0, 0, w, h);
for (var i = 0; i< n; i++) {
var x = np[i].x;
var y = np[i].y;
var a = anim + (dir == 1 ? t * (i + 1) : t * (n - i));
var r = Math.abs(Math.sin(a));
ctx.save();
ctx.translate(x, y);
ctx.rotate(a);
ctx.fillStyle = "#fff";
ctx.fillRect(-gap / 2, -h / 2, gap, h);
ctx.fillStyle = "#888";
ctx.beginPath();
ctx.moveTo(-gap / 2, -h / 2);
ctx.lineTo(-gap / 2 + 10, -h / 2);
ctx.lineTo(-gap / 2, -h / 2 + 10);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "#666";
ctx.font = "30px Arial";
ctx.textAlign = "center";
ctx.fillText((i + 1), 0, 0);
ctx.restore();
}
if (anim >0 && anim< Math.PI) {
ctx.save();
ctx.globalCompositeOperation = dir == 1 ? "destination-over" : "source-over";
ctx.beginPath();
ctx.moveTo(p0.x, p0.y);
ctx.lineTo(p1.x, p1.y);
ctx.lineTo(p1.x + 200 * Math.cos(anim - Math.PI / 2), p1.y + 200 * Math.sin(anim - Math.PI / 2));
ctx.arc(p1.x, p1.y, 200, anim - Math.PI / 2, anim + Math.PI / 2, dir == 1 ? true : false);
ctx.lineTo(p0.x, p0.y);
ctx.closePath();
ctx.fillStyle = "#ddd";
ctx.fill();
ctx.restore();
}
}
function flipUp() {
if (anim<= 0) {
anim = 0.01;
dir = -1;
p0 = np[3];
p1 = {x: np[3].x + 300, y: np[3].y};
}
}
function flipDown() {
if (anim<= 0) {
anim = 0.01;
dir = 1;
p0 = np[4];
p1 = {x: np[4].x - 300, y: np[4].y};
}
}
var timer = setInterval(function() {
anim += dir * 0.1;
if (anim< 0) {
anim = 0;
dir = 0;
}
if (anim >Math.PI) {
anim = Math.PI;
dir = 0;
}
draw();
}, 33);
canvas.addEventListener("mousedown", function(e) {
if (e.offsetX< w / 2) flipUp();
if (e.offsetX >w / 2) flipDown();
});
canvas.addEventListener("touchstart", function(e) {
e.preventDefault();
if (e.touches[0].clientX< canvas.offsetLeft + w / 2) flipUp();
if (e.touches[0].clientX >canvas.offsetLeft + w / 2) flipDown();
});
};
var canvas = document.getElementById("canvas");
var book = new Book(canvas);

最后，我們還需要CSS樣式來設置canvas的樣式。下面是一段CSS代碼：

canvas {
border: 1px solid #999;
cursor: pointer;
}

綜上所述，以上是一份基于HTML5的翻頁翻書效果代碼示例。您可以把這些代碼復制到您的網頁當中，根據需要進行調整。