HTML5 Canvas:拆分/计算线

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制一个线条
ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.stroke();

// 获取Canvas中的图像数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

// 拆分线条
const splitLine = (imageData, x1, y1, x2, y2) => {
  const dx = x2 - x1;
  const dy = y2 - y1;
  const steps = Math.sqrt(dx * dx + dy * dy);
  const xStep = dx / steps;
  const yStep = dy / steps;

  for (let i = 0; i< steps; i++) {
    const x = x1 + i * xStep;
    const y = y1 + i * yStep;
    const index = ((y | 0) * imageData.width + (x | 0)) * 4;
    imageData.data[index] = 255; // red
    imageData.data[index + 1] = 0; // green
    imageData.data[index + 2] = 0; // blue
    imageData.data[index + 3] = 255; // alpha
  }
};

// 调用拆分线条函数
splitLine(imageData, 10, 10, 100, 100);

// 将拆分后的线条绘制到Canvas上
ctx.putImageData(imageData, 0, 0);