如何用JavaScript在Canvas中绘制向内螺旋的彩色彩虹？

先看你要实现的图案：

先拆解图案结构 #

这图的核心是多层同心圆弧段，从中心向外放射排列：

• 每一层由多个间隔分布的圆弧块组成
• 相邻层的圆弧块位置错开，形成放射感
• 每个圆弧块的角度一致，半径按固定间距递增

一步步实现 #

1. 初始化Canvas并移到中心
   把坐标原点挪到画布中心，后续绘制不用反复计算中心坐标：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 坐标原点移到画布中心
ctx.translate(canvas.width / 2, canvas.height / 2);

2. 定义核心参数
   调整这些参数就能控制图案的疏密、大小：

const sliceAngle = Math.PI / 8; // 每个圆弧块的角度（比如22.5度）
const startRadius = 20; // 最内层圆弧的半径
const radiusGap = 30; // 圆弧块的宽度，以及层与层的间隔
const totalBlocksPerLayer = 16; // 每一层的圆弧块数量

3. 循环绘制每一层
   外层循环控制半径（从内到外），内层循环绘制当前层的所有圆弧块，关键是每一层的起始角度要错开，形成放射效果：

let currentRadius = startRadius;
// 直到圆弧超出画布范围停止
while (currentRadius < Math.min(canvas.width, canvas.height) / 2) {
  // 每一层的起始角度偏移，让相邻层的圆弧块错开
  let angle = (currentRadius / radiusGap) * sliceAngle;
  for (let i = 0; i < totalBlocksPerLayer; i++) {
    ctx.beginPath();
    // 画外圆弧
    ctx.arc(0, 0, currentRadius + radiusGap, angle, angle + sliceAngle);
    // 逆时针画内圆弧，闭合路径
    ctx.arc(0, 0, currentRadius, angle + sliceAngle, angle, true);
    ctx.closePath();
    // 填充颜色，这里用色相变化做彩色效果
    ctx.fillStyle = `hsl(${(i * 22) % 360}, 70%, 60%)`;
    ctx.fill();
    // 跳到下一个圆弧块的起始角度
    angle += sliceAngle * 2;
  }
  // 跳到下一层的起始半径
  currentRadius += radiusGap * 2;
}

踩坑提示 #

• 用ctx.translate移中心是关键，能大幅简化坐标计算
• 画内圆弧时要加true参数（逆时针），不然路径会乱，没法正确闭合
• 每一层的角度偏移是放射感的核心，别漏了这一步

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