嘿，这个问题我做Canvas动画时也碰到过，其实核心是要把事件监听和渲染逻辑分开，别把所有代码都塞在keydown里，这样代码既清晰又流畅。下面给你拆解具体思路和代码：

1. 核心逻辑拆分 #

先明确两个核心职责：

• keydown事件：只负责更新旋转角度的状态，不用直接处理绘制。比如按右箭头就给角度加个增量，左箭头就减，上下箭头同理。
• 渲染循环：单独写一个渲染函数，用requestAnimationFrame持续调用，每次根据当前的角度状态重新绘制三角形。这样角度一变，画面会自动同步更新。

2. 具体代码示例 #

第一步：初始化基础变量 #

先定义Canvas上下文和三角形的基础属性（中心坐标、边长、当前旋转角度）：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 用对象存三角形的所有属性，方便管理
const triangle = {
  x: canvas.width / 2,  // 中心X坐标
  y: canvas.height / 2, // 中心Y坐标
  sideLength: 80,       // 边长
  rotation: 0           // 当前旋转角度（用弧度，Canvas的rotate只认弧度）
};

第二步：监听keydown事件，只更新角度 #

这里只处理按键对应的角度变化，不做任何绘制操作：

document.addEventListener('keydown', (e) => {
  const angleStep = Math.PI / 36; // 每次旋转5度（转成弧度：5 * π/180 = π/36）
  switch(e.key) {
    case 'ArrowRight':
      triangle.rotation += angleStep; // 右箭头：顺时针转
      break;
    case 'ArrowLeft':
      triangle.rotation -= angleStep; // 左箭头：逆时针转
      break;
    case 'ArrowUp':
      triangle.rotation -= angleStep; // 上箭头：按需求定义为逆时针，可自行调整
      break;
    case 'ArrowDown':
      triangle.rotation += angleStep; // 下箭头：顺时针，可自行调整
      break;
  }
});

第三步：写渲染循环，根据角度绘制三角形 #

这里要注意Canvas旋转的正确步骤：先保存上下文状态，平移到三角形中心，旋转，再绘制，最后恢复状态，避免影响其他绘制：

function render() {
  // 每次渲染前清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 保存当前上下文状态（防止旋转影响后续其他绘制）
  ctx.save();
  
  // 平移到三角形中心——这一步很重要！不然会绕Canvas左上角旋转
  ctx.translate(triangle.x, triangle.y);
  // 应用当前旋转角度
  ctx.rotate(triangle.rotation);
  // 平移回原点，这样绘制三角形的坐标可以基于中心偏移
  ctx.translate(-triangle.x, -triangle.y);
  
  // 绘制等边三角形（以中心为基准计算三个顶点）
  ctx.beginPath();
  ctx.moveTo(triangle.x, triangle.y - triangle.sideLength/2); // 顶部顶点
  ctx.lineTo(
    triangle.x - triangle.sideLength/2 * Math.sqrt(3)/2, 
    triangle.y + triangle.sideLength/4
  ); // 左下顶点
  ctx.lineTo(
    triangle.x + triangle.sideLength/2 * Math.sqrt(3)/2, 
    triangle.y + triangle.sideLength/4
  ); // 右下顶点
  ctx.closePath();
  ctx.fillStyle = '#ff4444';
  ctx.fill();
  ctx.strokeStyle = '#333';
  ctx.stroke();
  
  // 恢复上下文状态
  ctx.restore();
  
  // 循环渲染，和浏览器刷新频率同步
  requestAnimationFrame(render);
}

// 启动渲染循环
render();

3. 为什么不把渲染逻辑放keydown里？ #

• 要是每次按键都直接渲染，快速按键时会导致渲染频繁，还可能和其他动画逻辑冲突。
• requestAnimationFrame是Canvas动画的标准做法，它会和浏览器刷新频率（一般60帧/秒）同步，画面更流畅。
• 职责分离后，代码更易维护——比如后续要加鼠标控制旋转，只需要加新的事件监听修改角度就行，不用动渲染逻辑。

小补充 #

• 记得用弧度：Canvas的rotate方法只接受弧度值，所以要把你想转的角度转成弧度（公式：弧度 = 角度 * Math.PI / 180）。
• 旋转中心：一定要先平移到三角形中心再旋转，不然会绕Canvas左上角转，效果完全不对。
• 调整angleStep的值可以改变旋转速度，值越大转得越快。

内容的提问来源于stack exchange，提问作者Anderson Trugilio