html5 canvas实现3d正方体旋转动画的核心是用javascript模拟透视投影：定义三维顶点→应用欧拉角旋转→透视投影至二维→按z值深度排序面片→requestanimationframe驱动动画→支持鼠标拖拽交互。
用 HTML5 Canvas 制作 3D 立体旋转的正方体动画，核心不是“真 3D 渲染”，而是用 JavaScript 模拟透视投影 + 二维绘图实现视觉上的立体感。它轻量、兼容性好，不依赖 WebGL 或第三方库。
关键思路是：定义三维顶点 → 投影到二维画布 → 按深度排序绘制面 → 用 requestAnimationFrame 驱动旋转 → 支持鼠标交互控制角度
1. 搭建基础 Canvas 环境
<canvas id="canvas" width="400" height="400"></canvas>
JavaScript 中获取上下文：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
确保清空画布并设置抗锯齿（可选）：
ctx.imageSmoothingEnabled = false;
2. 定义正方体的 8 个三维顶点和 6 个面
用 x, y, z 表示空间坐标（单位可设为像素）：
const points = [ new Point3d(-100, -100, -100), // 0 new Point3d(100, -100, -100), // 1 new Point3d(100, 100, -100), // 2 new Point3d(-100, 100, -100), // 3 new Point3d(-100, -100, 100), // 4 new Point3d(100, -100, 100), // 5 new Point3d(100, 100, 100), // 6 new Point3d(-100, 100, 100), // 7 ];
每个面由三个或四个点组成（三角形或四边形），例如前表面（z = -100）：
const faces = [
{ points: [0,1,2,3], color: '#6666cc' }, // 前
{ points: [4,5,6,7], color: '#cc6666' }, // 后
{ points: [0,1,5,4], color: '#66cc66' }, // 下
{ points: [2,3,7,6], color: '#cc66cc' }, // 上
{ points: [1,2,6,5], color: '#cccc66' }, // 右
{ points: [0,3,7,4], color: '#66cccc' }, // 左
];
✅ 提示：
Point3d是自定义类，含x, y, z属性；面按逆时针顺序定义，便于后续法向量计算与遮挡判断。
3. 实现透视投影函数
把三维点 (x,y,z) 投影成二维屏幕坐标 (x′, y′)：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const fl = 250; // 焦距（越大越“远”，变形越小）
const vpX = canvas.width / 2;
const vpY = canvas.height / 2;
function project(p) {
const scale = fl / (fl + p.z);
return {
x: vpX + p.x * scale,
y: vpY + p.y * scale,
z: p.z, // 保留 z 用于排序
scale: scale
};
}
这个公式模拟了人眼“近大远小”的视觉效果，是整个 3D 效果的基础。
4. 绘制带深度排序的面
- 对每个面，先将它的顶点全部投影；
- 计算该面中心点的平均
z值（或取最小/最大 z），作为“深度值”； - 按深度从远到近排序（即 z 小的先画，z 大的后画），避免近处面被远处覆盖；
- 使用
ctx.beginPath()+ctx.moveTo()+ctx.lineTo()+ctx.closePath()+ctx.fill()绘制填充多边形。
示例片段：
faces.sort((a, b) => {
const avgZa = a.points.reduce((sum, i) => sum + points[i].z, 0) / a.points.length;
const avgZb = b.points.reduce((sum, i) => sum + points[i].z, 0) / b.points.length;
return avgZa - avgZb; // z 小的在前（更远），先画
});
faces.forEach(face => {
const projected = face.points.map(i => project(points[i]));
ctx.fillStyle = face.color;
ctx.beginPath();
ctx.moveTo(projected[0].x, projected[0].y);
for (let i = 1; i <hr><h3><strong>5. 添加旋转与动画循环</strong></h3><p>用欧拉角（绕 X/Y/Z 轴）更新每个顶点坐标。简单起见，常用绕 X 和 Y 轴组合旋转：</p><pre class="brush:javascript;toolbar:false;">let angleX = 0, angleY = 0;
function rotatePoint(p, ax, ay) {
// 先绕 Y 轴旋转
let x1 = p.x * Math.cos(ay) - p.z * Math.sin(ay);
let z1 = p.x * Math.sin(ay) + p.z * Math.cos(ay);
let y1 = p.y;
// 再绕 X 轴旋转
let y2 = y1 * Math.cos(ax) - z1 * Math.sin(ax);
let z2 = y1 * Math.sin(ax) + z1 * Math.cos(ax);
let x2 = x1;
return new Point3d(x2, y2, z2);
}
// 每帧更新所有点
const rotatedPoints = points.map(p => rotatePoint(p, angleX, angleY));然后用 requestAnimationFrame 驱动：
function animate() {
angleX += 0.01;
angleY += 0.015;
// 清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新、投影、排序、绘制...
draw();
requestAnimationFrame(animate);
}
animate();6. 加入鼠标拖拽交互（可选增强）
监听 mousedown/mousemove，根据鼠标位移动态调整 angleX/angleY：
let isDragging = false;
let lastX = 0, lastY = 0;
canvas.addEventListener('mousedown', e => {
isDragging = true;
lastX = e.clientX;
lastY = e.clientY;
});
window.addEventListener('mousemove', e => {
if (!isDragging) return;
const deltaX = e.clientX - lastX;
const deltaY = e.clientY - lastY;
angleY += deltaX * 0.01;
angleX += deltaY * 0.01;
lastX = e.clientX;
lastY = e.clientY;
});
window.addEventListener('mouseup', () => isDragging = false);这样用户就能自由拖拽观察正方体不同角度。
不复杂但容易忽略。重点就三块：三维建模、透视投影、深度排序绘制。写满 200 行左右就能跑起来，比引入 Three.js 更可控，也更适合理解 3D 图形原理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
