如何用HTML Canvas实现两个车轮独立旋转？Canvas新手求助

嘿，作为刚接触Canvas的新手，遇到这种变换叠加的坑太正常了！你猜的完全没错——问题确实出在c.save()和c.restore()的调用位置上。Canvas的变换是基于当前坐标系的叠加操作，要是没及时保存和恢复初始状态，第二个车轮就会继承第一个车轮的变换结果，导致它绕着第一个转。

问题核心原因 #

Canvas的translate()、rotate()这些方法都是修改当前绘图坐标系的，而不是直接操作图形。比如你先给第一个车轮做了translate(100,200)和rotate(angle)，如果没恢复坐标系，第二个车轮的translate()会在已经偏移旋转后的坐标系上再叠加，自然就跟着第一个车轮跑了。

正确的代码实现方式 #

你需要给每个车轮的绘制流程单独包裹save()和restore()，确保每个车轮都在独立的初始坐标系上进行变换：

// 假设angle是你用来控制旋转的变量
let angle = 0;

function draw() {
  // 清空画布
  c.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制第一个车轮
  c.save(); // 保存当前初始坐标系状态
  c.translate(150, 300); // 移动到第一个车轮的位置（以画布原点为基准）
  c.rotate(angle); // 绕车轮中心旋转
  // 绘制车轮轮廓
  c.beginPath();
  c.arc(0, 0, 40, 0, Math.PI * 2);
  c.strokeStyle = '#333';
  c.lineWidth = 3;
  c.stroke();
  // 绘制辐条
  for (let i = 0; i < 6; i++) {
    c.beginPath();
    c.moveTo(0, 0);
    c.lineTo(40 * Math.cos(i * Math.PI / 3), 40 * Math.sin(i * Math.PI / 3));
    c.stroke();
  }
  c.restore(); // 恢复到初始坐标系，避免影响下一个车轮

  // 绘制第二个车轮
  c.save(); // 再次保存初始坐标系
  c.translate(450, 300); // 移动到第二个车轮的位置（同样以画布原点为基准）
  c.rotate(angle); // 绕自身中心旋转
  // 重复车轮绘制代码
  c.beginPath();
  c.arc(0, 0, 40, 0, Math.PI * 2);
  c.strokeStyle = '#333';
  c.lineWidth = 3;
  c.stroke();
  for (let i = 0; i < 6; i++) {
    c.beginPath();
    c.moveTo(0, 0);
    c.lineTo(40 * Math.cos(i * Math.PI / 3), 40 * Math.sin(i * Math.PI / 3));
    c.stroke();
  }
  c.restore();

  // 更新旋转角度
  angle += 0.02;
  requestAnimationFrame(draw);
}

draw();

优化技巧：封装绘制函数 #

为了避免重复代码，你可以把车轮绘制逻辑封装成一个独立函数，这样更易维护也不容易出错：

function drawWheel(x, y, rotation) {
  c.save();
  c.translate(x, y);
  c.rotate(rotation);
  // 绘制车轮
  c.beginPath();
  c.arc(0, 0, 40, 0, Math.PI * 2);
  c.strokeStyle = '#333';
  c.lineWidth = 3;
  c.stroke();
  // 绘制辐条
  for (let i = 0; i < 6; i++) {
    c.beginPath();
    c.moveTo(0, 0);
    c.lineTo(40 * Math.cos(i * Math.PI / 3), 40 * Math.sin(i * Math.PI / 3));
    c.stroke();
  }
  c.restore();
}

// 调用函数绘制两个车轮
drawWheel(150, 300, angle);
drawWheel(450, 300, angle);

这样每次调用drawWheel()时，都会独立保存和恢复坐标系，两个车轮就只会绕自身中心旋转，不会互相干扰了。

内容的提问来源于stack exchange，提问作者Sai Rohit