canvas翻页电子书的“曲线模拟”核心是用动态三次贝塞尔曲线拟合纸张翻折弧度，结合实时pivot调整、正反面透视缩放与明暗变化及分层渲染优化，实现物理真实的翻页效果。

Canvas 实现翻页电子书的“曲线模拟”核心在于用贝塞尔曲线（尤其是三次贝塞尔）近似真实纸张翻折时的自然弧度，而非简单直线折叠。关键不是画一条静态曲线，而是动态计算每帧中纸张边缘上各点在翻页过程中的位置，使其符合物理直觉：靠近翻折轴的点位移小，远离的点拉伸/弯曲明显，且翻过去的页面背面需按透视缩放、变暗。

1. 翻页区域建模：定义翻折轴与活动页边界

将一页纸抽象为矩形区域，设左页固定，右页为可翻动页。翻折动作以页面右侧中点（或用户拖拽起点）为瞬时翻折轴（pivot）。实际中该轴并非固定直线，而是随鼠标/手指移动实时变化的“瞬时旋转-弯曲复合轴”。为简化，通常取页面右边缘中点为初始 pivot，再根据拖拽偏移量动态调整其垂直位置和局部曲率半径。

• 记录拖拽点 P = (x, y) 相对于页面右上角的相对坐标
• 计算翻折角度 θ ≈ atan2(y - height/2, width - x)，反映翻起高度
• 设定基础曲率半径 r，随 |θ| 增大而减小（例如 r = max(50, 200 − 150×|θ|/π)），模拟纸张绷紧效应

2. 曲线生成：用三次贝塞尔拟合翻页边缘变形

真实纸张翻页时，原页面右边缘会从直线逐渐弯成一条平滑凸弧。Canvas 不直接支持曲面渲染，因此将该边缘离散为 20–40 个控制点，每个点通过三次贝塞尔插值计算其目标位置：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 起点 A = 右上角 (width, 0)，终点 B = 右下角 (width, height)
• 控制点 C1、C2 根据当前 θ 和 r 动态设置：C1 ≈ (width + r×sinθ, 0 − r×cosθ)，C2 ≈ (width + r×sinθ, height + r×cosθ)
• 对参数 t ∈ [0,1]，调用 B(t) = (1−t)³A + 3(1−t)²tC1 + 3(1−t)t²C2 + t³B 得到边缘上点位置
• 将整条贝塞尔边缘作为“翻起部分”的上边界，再按比例生成下边界与侧边，围出变形后的纸面多边形

3. 正反面与透视：Z轴感与光照模拟

仅画曲线不够真实，必须处理翻过去部分的视觉退化：

• 背面显示：当 |θ| > π/6 时，在翻起区域后层绘制镜像翻转的页面内容，并叠加半透明黑色遮罩（opacity ≈ 0.3 + 0.7×|θ|/π）模拟背光衰减
• 透视压缩：沿翻折方向（x 轴正向）对翻起区域做非线性缩放——越靠近 pivot 的纵坐标缩放比越接近 1，越靠外缩放比越小（如 y 方向缩放系数 s(y) = 1 − 0.4×|y − height/2|/height）
• 阴影投射：在 canvas 下层用 blur 的 radialGradient 绘制柔和阴影，中心对应 pivot 投影点，半径随 θ 增大而扩展

4. 性能优化：避免逐帧重绘全页

每次拖拽都重绘整个 canvas 开销大。实用做法是分层渲染：

• 底层 canvas 固定绘制不可动页（左页）与背景
• 中层 canvas 动态绘制当前翻页的正面变形区域（含贝塞尔边缘+内容纹理）
• 顶层 canvas 单独绘制背面+阴影（仅在翻页角度较大时启用）
• 利用 canvas.getContext('2d').setTransform() 对翻页区域做局部变换，而非操作图像像素
• 对贝塞尔点列做缓存（如预计算 32 个 t 值对应的位置数组），拖拽时仅插值更新，不重复调用 Math.pow

不复杂但容易忽略的是：曲线只是表象，真正决定真实感的是边缘点位移的连续性、正反面明暗过渡的非线性、以及翻页过程中 pivot 位置与曲率半径的协同变化。把这三者用 Canvas 的路径、变换和合成模式串起来，就能让二维平面“长出纸感”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！