HTML Canvas幸运转盘切片文本适配：自动调字号防重叠

嘿，这个问题我之前帮不少开发者踩过坑——当转盘切片多到20-25个时，每个切片角度窄到14°以内，文本挤在一起完全没法看。下面几个方案能帮你在保证字号尽可能大的前提下彻底解决重叠问题，咱们一步步来：

1. 动态计算当前切片能容纳的最大字号 #

这是最基础也最有效的一步，核心思路是：先算出切片的可用弧长，再不断调整字号，直到文本宽度刚好适配弧长（留些余量避免溢出）。

实现步骤：

• 计算切片的弧长：arcLength = 2 * Math.PI * radius * (sliceAngle / 360)
• 用Canvas的measureText()方法获取当前字号下的文本宽度
• 循环调整字号，直到文本宽度 ≤ 弧长的80%（留20%的安全余量）

代码示例：

function getMaxFontSize(ctx, text, sliceAngle, radius) {
  const maxArcLength = 2 * Math.PI * radius * (sliceAngle / 360);
  let fontSize = 24; // 初始字号从大往小调
  ctx.font = `${fontSize}px Arial`;
  
  while (ctx.measureText(text).width > maxArcLength * 0.8 && fontSize > 8) {
    fontSize--;
    ctx.font = `${fontSize}px Arial`;
  }
  return fontSize;
}

// 使用示例
const sliceAngle = 360 / 25; // 14.4°
const maxFont = getMaxFontSize(ctx, "奖品名称", sliceAngle, 200);
ctx.font = `${maxFont}px Arial`;

2. 让文本跟着切片角度旋转，适配窄空间 #

默认水平文本在窄切片里太占横向空间，把文本旋转到和切片的径向方向一致，让文本沿着切片的“纵向”排列，能瞬间释放更多空间。

实现要点：

• 计算切片的中间角度（比如第n个切片的角度范围是startAngle到endAngle，中间角度就是(startAngle + endAngle)/2）
• 将画布原点平移到转盘中心，旋转到中间角度，再绘制文本（记得用textAlign='center'和textBaseline='middle'）

代码示例：

function drawRotatedText(ctx, text, x, y, angle) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle * Math.PI / 180); // 转成弧度
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, 0, -radius + 30); // -radius+30 控制文本距离中心的距离，可调整
  ctx.restore();
}

// 使用示例：假设转盘中心在(250,250)，中间角度为45°
drawRotatedText(ctx, "一等奖", 250, 250, 45);

3. 长文本自动换行或缩写 #

如果文本本身很长（比如“iPhone 15 Pro Max 256G”），即使调大字号也会挤，这时候可以自动拆分换行，或者超过长度就加省略号。

自动换行示例：

function wrapText(ctx, text, maxWidth, fontSize) {
  const words = text.split(' ');
  let line = '';
  const lines = [];
  
  ctx.font = `${fontSize}px Arial`;
  for (let word of words) {
    const testLine = line + word + ' ';
    const metrics = ctx.measureText(testLine);
    const testWidth = metrics.width;
    if (testWidth > maxWidth && line !== '') {
      lines.push(line);
      line = word + ' ';
    } else {
      line = testLine;
    }
  }
  lines.push(line);
  return lines;
}

// 使用时，把多行文本分别绘制，调整每行的y偏移
const lines = wrapText(ctx, "iPhone 15 Pro Max", maxArcLength * 0.8, maxFont);
lines.forEach((line, index) => {
  ctx.fillText(line, 0, -radius + 30 + index * (maxFont + 2));
});

4. 极端窄切片：径向文本（沿圆弧排列） #

如果切片角度小于10°，旋转文本还是挤，可以试试让文本沿着切片的圆弧排列，每个字符顺着圆弧切线方向，最大化利用切片的弧形空间。

实现思路：逐字符计算位置，每个字符旋转对应的角度后绘制：

function drawRadialText(ctx, text, centerX, centerY, radius, startAngle) {
  const charAngle = (sliceAngle * Math.PI / 180) / text.length;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  
  for (let i = 0; i < text.length; i++) {
    const angle = startAngle + charAngle * i + charAngle / 2;
    const x = centerX + Math.cos(angle) * radius;
    const y = centerY + Math.sin(angle) * radius;
    
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(angle + Math.PI / 2); // 让字符垂直于圆弧切线
    ctx.fillText(text[i], 0, 0);
    ctx.restore();
  }
}

组合方案推荐 #

优先用「动态计算最大字号 + 旋转文本」，这两个组合能解决90%以上的多切片场景；如果文本过长，再加自动换行；极端窄切片（<10°）再考虑径向文本。

内容的提问来源于stack exchange，提问作者Albin wärme