编写页面 使用JavaScript在画布中绘制一个旋转的三维立方体

首先，在HTML文件中添加一个画布元素，并为其设置一个ID：

<canvas id="myCanvas"></canvas>

然后，使用JavaScript获取该画布元素，并将其上下文设置为“3d”：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("3d");

接下来，定义一个立方体对象，包含八个顶点和十二个边。此处使用的是一个简单的立方体，可以根据需要进行修改：

var cube = {
  vertices: [
    {x: -50, y: -50, z: -50},
    {x: -50, y: 50, z: -50},
    {x: 50, y: 50, z: -50},
    {x: 50, y: -50, z: -50},
    {x: -50, y: -50, z: 50},
    {x: -50, y: 50, z: 50},
    {x: 50, y: 50, z: 50},
    {x: 50, y: -50, z: 50}
  ],
  edges: [
    [0, 1], [1, 2], [2, 3], [3, 0],
    [4, 5], [5, 6], [6, 7], [7, 4],
    [0, 4], [1, 5], [2, 6], [3, 7]
  ]
};

接下来，定义一个函数来绘制立方体。该函数将遍历立方体的每个顶点，并将其投影到2D平面上。然后，将每个顶点连接起来，形成立方体的边：

function drawCube(cube, angle) {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 定义旋转角度
  var rad = angle * Math.PI / 180;
  var cos = Math.cos(rad);
  var sin = Math.sin(rad);
  
  // 遍历每个顶点，并将其投影到2D平面上
  var points = [];
  for (var i = 0; i < cube.vertices.length; i++) {
    var vertex = cube.vertices[i];
    var x = vertex.x;
    var y = vertex.y * cos - vertex.z * sin;
    var z = vertex.y * sin + vertex.z * cos;
    points.push({x: x, y: y, z: z});
  }
  
  // 绘制立方体的边
  ctx.beginPath();
  for (var i = 0; i < cube.edges.length; i++) {
    var edge = cube.edges[i];
    var p1 = points[edge[0]];
    var p2 = points[edge[1]];
    ctx.moveTo(p1.x + canvas.width / 2, p1.y + canvas.height / 2);
    ctx.lineTo(p2.x + canvas.width / 2, p2.y + canvas.height / 2);
  }
  ctx.stroke();
}

最后，在主函数中调用drawCube()函数，并使用setInterval()函数来连续旋转立方体：

var angle = 0;
setInterval(function() {
  drawCube(cube, angle);
  angle += 1;
}, 10);

完整的代码如下：

<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("3d");

var cube = {
  vertices: [
    {x: -50, y: -50, z: -50},
    {x: -50, y: 50, z: -50},
    {x: 50, y: 50, z: -50},
    {x: 50, y: -50, z: -50},
    {x: -50, y: -50, z: 50},
    {x: -50, y: 50, z: 50},
    {x: 50, y: 50, z: 50},
    {x: 50, y: -50, z: 50}
  ],
  edges: [
    [0, 1], [1, 2], [2, 3], [3, 0],
    [4, 5], [5, 6], [6, 7], [7, 4],
    [0, 4], [1, 5], [2, 6], [3, 7]
  ]
};

function drawCube(cube, angle) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  var rad = angle * Math.PI / 180;
  var cos = Math.cos(rad);
  var sin = Math.sin(rad);
  
  var points = [];
  for (var i = 0; i < cube.vertices.length; i++) {
    var vertex = cube.vertices[i];
    var x = vertex.x;
    var y = vertex.y * cos - vertex.z * sin;
    var z = vertex.y * sin + vertex.z * cos;
    points.push({x: x, y: y, z: z});
  }
  
  ctx.beginPath();
  for (var i = 0; i < cube.edges.length; i++) {
    var edge = cube.edges[i];
    var p1 = points[edge[0]];
    var p2 = points[edge[1]];
    ctx.moveTo(p1.x + canvas.width / 2, p1.y + canvas.height / 2);
    ctx.lineTo(p2.x + canvas.width / 2, p2.y + canvas.height / 2);
  }
  ctx.stroke();
}

var angle = 0;
setInterval(function() {
  drawCube(cube, angle);
  angle += 1;
}, 10);
</script>