canvas轨迹重绘生成图片宽高缩小 重绘后的轨迹如何保持距离上下左右距离一样并且生成的轨迹不被放大完整js示例代码

可以通过以下步骤来实现：

1. 获取原始画布的宽高和轨迹数组。

2. 创建一个新的画布，设置宽高为缩小后的值。

3. 计算缩小比例，将轨迹数组中的每个点坐标都乘以该比例。

4. 在新画布上绘制缩小后的轨迹。

5. 将新画布转换为图片。

6. 根据原始画布和新画布的大小比例，计算出缩小后的轨迹在原始画布上的坐标，并绘制出来。

以下是示例代码：

// 获取原始画布和轨迹数组
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let width = canvas.width;
let height = canvas.height;
let originalPath = [...];

// 创建新画布并设置宽高
let newCanvas = document.createElement('canvas');
let newCtx = newCanvas.getContext('2d');
let newWidth = width / 2;
let newHeight = height / 2;
newCanvas.width = newWidth;
newCanvas.height = newHeight;

// 计算缩小比例并缩小轨迹数组
let scale = newWidth / width;
let newPath = originalPath.map(point => ({
  x: point.x * scale,
  y: point.y * scale
}));

// 在新画布上绘制缩小后的轨迹
newPath.forEach((point, index) => {
  if (index === 0) {
    newCtx.beginPath();
    newCtx.moveTo(point.x, point.y);
  } else {
    newCtx.lineTo(point.x, point.y);
  }
});
newCtx.stroke();

// 将新画布转换为图片
let newImage = new Image();
newImage.src = newCanvas.toDataURL();

// 计算缩小后的轨迹在原始画布上的坐标并绘制出来
let ratio = newWidth / width;
ctx.drawImage(newImage, 0, 0, newWidth, newHeight, (width - newWidth) / 2, (height - newHeight) / 2, newWidth * ratio, newHeight * ratio);

以上代码中，我将原始画布的宽高缩小了一半，你可以根据实际需求修改缩小比例和缩小后的宽高。在最后一步绘制缩小后的轨迹时，我使用了 `drawImage` 方法，并通过计算得出缩小后的轨迹在原始画布上的坐标和宽高。