DOM和Canvas实现竖向文字排列：技术解析与实战指南

在网页开发中，文字竖向排列是常见需求，尤其在中文排版、日式海报或传统艺术设计中。本文将从DOM和Canvas两个维度，系统阐述实现文字竖向排列的技术方案，涵盖基础实现、性能优化及跨浏览器兼容性处理。

一、DOM实现竖向文字排列的技术方案

1.1 CSS Writing-Mode属性

CSS的writing-mode属性是实现竖向文字最直接的方案，支持vertical-rl（从右向左）和vertical-lr（从左向右）两种模式。

<div class="vertical-text">
  这是竖向排列的文字
</div>

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright; /* 保持文字正立 */
  height: 300px;
  border: 1px solid #ccc;
}

技术要点：

• writing-mode: vertical-rl是中文排版常用模式，文字从上到下、从右向左排列。
• text-orientation: upright确保拉丁字母和数字保持正立，避免旋转90度。
• 需设置固定高度（如height: 300px），否则容器可能无法正确包裹内容。

1.2 旋转容器方案

对于不支持writing-mode的旧浏览器，可通过CSS Transform旋转容器实现。

<div class="rotate-container">
  <div class="rotate-text">旋转实现的竖向文字</div>
</div>

.rotate-container {
  width: 300px;
  height: 20px; /* 单行高度 */
  transform: rotate(90deg);
  transform-origin: left top;
  position: absolute;
  left: 0;
  top: 0;
}
.rotate-text {
  white-space: nowrap;
}

技术要点：

• 容器旋转90度后，需调整transform-origin为左上角，避免位置偏移。
• 内部文字需设置white-space: nowrap防止换行。
• 此方案仅适用于单行文字，多行需复杂计算。

1.3 Flexbox布局模拟

结合Flexbox和transform可实现更灵活的竖向排列。

<div class="flex-vertical">
  <span>F</span>
  <span>l</span>
  <span>e</span>
  <span>x</span>
</div>

.flex-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-vertical span {
  display: block;
  transform: rotate(90deg);
  margin: 5px 0;
}

技术要点：

• 每个字符单独包裹为<span>，通过Flexbox垂直排列。
• 字符旋转后需调整间距（margin）。
• 适用于少量文字，大量文字会导致DOM节点过多。

二、Canvas实现竖向文字排列的技术方案

2.1 基础Canvas文字绘制

Canvas通过fillText或strokeText绘制文字，需手动计算每个字符的位置。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const text = 'Canvas竖向文字';
const x = 50; // 起始X坐标
const y = 50; // 起始Y坐标
const lineHeight = 30; // 行高
// 逐字符绘制
for (let i = 0; i < text.length; i++) {
  ctx.fillText(text[i], x, y + i * lineHeight);
}

技术要点：

• y + i * lineHeight控制每个字符的垂直位置。
• 需手动设置textAlign和textBaseline确保对齐。
• 适用于动态生成的文字，如用户输入或数据可视化。

2.2 旋转Canvas上下文

通过旋转Canvas上下文，可实现更灵活的竖向排列。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const text = '旋转Canvas';
const x = 100;
const y = 100;
ctx.save();
ctx.translate(x, y);
ctx.rotate(-Math.PI / 2); // 旋转-90度
ctx.fillText(text, 0, 0);
ctx.restore();

技术要点：

• translate(x, y)将原点移至目标位置。
• rotate(-Math.PI / 2)旋转-90度（顺时针）。
• 需通过save()和restore()保存和恢复上下文状态。

2.3 多行竖向文字处理

对于多行竖向文字，需计算每行的起始位置。

function drawVerticalText(ctx, text, x, y, lineHeight, maxWidth) {
  const lines = [];
  let currentLine = '';
  // 按字符分割，模拟换行
  for (const char of text) {
    const testLine = currentLine + char;
    const metrics = ctx.measureText(testLine);
    if (metrics.width > maxWidth) {
      lines.push(currentLine);
      currentLine = char;
    } else {
      currentLine = testLine;
    }
  }
  lines.push(currentLine);
  // 绘制每行
  lines.forEach((line, i) => {
    ctx.fillText(line, x, y + i * lineHeight);
  });
}

技术要点：

• 通过measureText计算文字宽度，实现自动换行。
• 每行文字的Y坐标通过y + i * lineHeight计算。
• 适用于需要控制宽度的场景，如海报生成。

三、性能优化与兼容性处理

3.1 DOM方案优化

• 减少DOM节点：Flexbox方案中，大量字符会导致DOM节点过多，建议合并为<div>通过::after伪元素生成分隔符。
• 硬件加速：对旋转容器添加transform: translateZ(0)触发GPU加速，提升动画性能。
• 响应式设计：使用vw单位设置容器宽度，确保不同屏幕尺寸下的显示效果。

3.2 Canvas方案优化

• 离屏Canvas：对于重复绘制的文字，可预先在离屏Canvas中渲染，再通过drawImage复制到主Canvas。
  ```javascript
  const offscreenCanvas = document.createElement(‘canvas’);
  const offscreenCtx = offscreenCanvas.getContext(‘2d’);
  offscreenCanvas.width = 200;
  offscreenCanvas.height = 100;
  offscreenCtx.fillText(‘预渲染文字’, 10, 50);

// 主Canvas绘制
ctx.drawImage(offscreenCanvas, 0, 0);

- **文字缓存**：对静态文字，可通过`CanvasRenderingContext2D.measureText`缓存宽度数据，避免重复计算。
### 3.3 跨浏览器兼容性
- **CSS前缀**：对`writing-mode`添加`-webkit-`前缀，兼容Safari等浏览器。
```css
.vertical-text {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

• Canvas字体回退：指定多种字体，确保不同平台下的显示效果。

  ctx.font = '16px "Microsoft YaHei", "PingFang SC", sans-serif';

• 降级方案：对不支持writing-mode的浏览器，通过JavaScript检测并切换为旋转容器方案。

四、总结与建议

1. 简单场景优先DOM：对于静态竖向文字，CSS的writing-mode是最优解，代码简洁且性能良好。
2. 动态内容选择Canvas：若需动态生成或复杂排版（如渐变、阴影），Canvas提供更灵活的控制。
3. 性能敏感场景优化：对大量竖向文字，建议使用离屏Canvas或WebGL加速。
4. 兼容性测试：在目标浏览器中测试竖向排列效果，尤其关注移动端和旧版IE。

通过DOM和Canvas的组合使用，开发者可轻松实现各种竖向文字排列需求，从简单的标题到复杂的数据可视化，均能找到合适的技术方案。