如何在HTML Canvas中沿SVG路径重复绘制元素？

完全可以实现沿SVG路径按固定间隔或比例重复绘制元素，下面是具体步骤和代码示例：

1. 获取SVG路径的总长度 #

先利用SVG的API解析路径字符串并计算总长度，这一步可以通过创建临时SVG路径元素完成：

// 你的SVG路径字符串
const svgPathData = "M20 20 C80 100 200 0 300 100 L380 20";
// 创建临时SVG路径元素
const tempSvgPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
tempSvgPath.setAttribute("d", svgPathData);
// 获取路径总长度
const totalPathLength = tempSvgPath.getTotalLength();

2. 沿路径采样并绘制元素 #

根据需求设置间隔（固定像素值或总长度比例），遍历路径上的每个采样点，同时计算路径在该点的切线方向，让元素沿路径对齐：

const canvas = document.getElementById("your-canvas");
const ctx = canvas.getContext("2d");

// 定义绘制间隔：可选固定值（如25px）或比例（如总长度的4%）
const drawInterval = 25; 
// 或者用比例：const drawInterval = totalPathLength * 0.04;

// 预加载的灯光图片（如果用图片的话）
const lightImg = new Image();
lightImg.src = "light-icon.png";
lightImg.onload = drawElementsAlongPath; // 图片加载完成后执行绘制

function drawElementsAlongPath() {
  for (let currentDistance = 0; currentDistance <= totalPathLength; currentDistance += drawInterval) {
    // 获取当前距离对应的路径点坐标
    const point = tempSvgPath.getPointAtLength(currentDistance);
    // 计算路径在该点的切线角度（用相邻点计算斜率）
    const nextDistance = Math.min(currentDistance + 1, totalPathLength);
    const nextPoint = tempSvgPath.getPointAtLength(nextDistance);
    const rotationAngle = Math.atan2(nextPoint.y - point.y, nextPoint.x - point.x);

    // 保存当前画布状态，避免旋转平移影响后续绘制
    ctx.save();
    // 将画布原点移到当前路径点
    ctx.translate(point.x, point.y);
    // 旋转画布，让元素沿路径方向对齐
    ctx.rotate(rotationAngle);

    // 绘制元素：这里示例两种方式
    // 方式1：绘制基础Canvas图形（圆形灯光）
    ctx.beginPath();
    ctx.arc(0, 0, 6, 0, Math.PI * 2);
    ctx.fillStyle = "#ffcc00";
    ctx.shadowBlur = 10;
    ctx.shadowColor = "#ffcc00";
    ctx.fill();

    // 方式2：绘制预加载的图片（注释掉上面的圆形，启用这个）
    // ctx.drawImage(lightImg, -10, -10, 20, 20);

    // 恢复画布状态
    ctx.restore();
  }
}

3. 坐标系适配注意事项 #

• 如果SVG路径带有viewBox或偏移，需要先通过tempSvgPath.getBBox()获取路径的边界信息，调整Canvas的绘制原点或缩放比例，确保元素位置和SVG路径匹配。
• 对于极端复杂的路径，可预计算所有采样点并缓存，提升绘制性能。

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