在Canvas上绘制可围绕自身中心旋转的Path2D对象的实现问题

实现逻辑 #

要实现Path2D图形围绕自身中心旋转，只需要调整变换顺序，补充图形自身中心的偏移即可，核心原理如下：

• 首先确认你当前使用的SVG图形固有宽高约为30px（路径坐标范围x: 0~29.8、y: 0~29.8），自身中心坐标为(15, 15)
• Canvas 2D的变换是矩阵后生效，正确顺序为：
  • 平移到你期望图形最终放置的目标位置
  • 执行旋转操作
  • 反向平移(-自身中心x, -自身中心y)抵消图形的固有偏移，让图形中心与旋转锚点重合

可直接使用的修改代码 #

你只需要替换原代码中animate函数的变换逻辑即可：

const animate = () => {
    requestAnimationFrame(animate)
    ctx.fillStyle = "rgba(0 , 0 , 0 , 0.1)"
    ctx.fillRect(0 , 0 , canvas.width , canvas.height)
    ctx.fillStyle = "white"

    // 调整后的变换顺序
    ctx.translate(70, 70) // 第一步：平移到目标位置，这里就是最终图形的中心位置
    ctx.rotate(rotation) // 第二步：绕当前原点（目标位置）旋转
    ctx.translate(-15, -15) // 第三步：反向偏移图形自身中心，让图形中心对齐旋转锚点

    rotation += 0.1
    ctx.fill(path)
    ctx.resetTransform()
}

如果你的SVG路径后续有调整，只需要重新计算路径的最大宽高，替换第三步偏移的15为对应半宽、半高数值即可。

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