HTML5 Canvas绘制环套圆形：如何实现内层圆形旋转，是否有适用第三方库

原生Canvas实现逻辑 #

核心实现思路如下：

• 所有内层小圆的旋转参考点是外层橙色大圆的中心（坐标为(250, 250)，和你设置的MAIN_RADIUS值一致）
• 绘制前通过Canvas的translate方法将画布原点移动到大圆中心，再应用全局旋转变换，绘制完成后恢复画布状态，避免变换叠加影响后续绘制
• 连续旋转效果可通过requestAnimationFrame创建动画循环，逐帧更新旋转角度变量实现

完整可运行代码如下：

<canvas id="testCanvas" width="500" height="500"></canvas>

// CONSTANTS
const LAYER_3 = 3
const MAIN_RADIUS = 250
const SMALL_RADIUS = MAIN_RADIUS / 4
// 小圆到大圆中心的轨道半径
const ORBIT_RADIUS = MAIN_RADIUS / 2
// 全局旋转角度（弧度）
let rotateAngle = 0

const context = document.getElementById('testCanvas').getContext('2d')

// 动画渲染循环
function render() {
  // 清空画布
  context.clearRect(0, 0, 500, 500)
  // 绘制外层橙色大圆
  context.beginPath();
  context.fillStyle = 'orange'
  context.arc(MAIN_RADIUS, MAIN_RADIUS, MAIN_RADIUS, 0, 2 * Math.PI, false)
  context.fill()

  // 保存当前画布状态
  context.save()
  // 原点移动到大圆中心
  context.translate(MAIN_RADIUS, MAIN_RADIUS)
  // 应用旋转
  context.rotate(rotateAngle)

  // 批量绘制内层蓝色小圆
  for (let i = 0; i < LAYER_3; i++) {
    // 按小圆数量均分360度计算每个小圆的角度偏移
    const singleAngle = 2 * Math.PI / LAYER_3
    const x = Math.cos(i * singleAngle) * ORBIT_RADIUS
    const y = Math.sin(i * singleAngle) * ORBIT_RADIUS
    context.beginPath();
    context.fillStyle = 'blue'
    context.arc(x, y, SMALL_RADIUS, 0, 2 * Math.PI, false)
    context.fill()
  }

  // 恢复画布原始状态
  context.restore()

  // 更新旋转角度，数值越大旋转速度越快
  rotateAngle += 0.01
  requestAnimationFrame(render)
}

render()

可选第三方简化库 #

如果不想手动处理画布变换和动画逻辑，可以选择以下封装好的2D绘图库：

• Konva：专门面向Canvas的交互式2D绘图库，内置图形变换、动画、事件绑定能力，直接设置圆形元素的rotation属性即可实现旋转，不需要手动操作画布状态
• p5.js：创意编程领域常用的JS库，绘图API和动画循环都做了高度封装，上手门槛低
• PixiJS：高性能2D渲染库，适合复杂动画场景，底层自动做渲染性能优化，图形的旋转、位移都可以直接操作元素属性实现

内容的提问来源于stack exchange，提问作者Subrata Banerjee