如何在Canvas完成计算后获取Path2D对象？

你当前的代码直接在Canvas上下文（ctx）上绘制路径，这种方式无法直接提取出对应的Path2D对象。要实现目标，需要调整代码逻辑，以下是两种可行方案：

方案一：提前使用Path2D构建路径并应用变换 #

直接用Path2D对象构建路径，再将上下文的变换矩阵应用到它上面，后续既可以用上下文绘制，也能保留这个带变换的Path2D对象。

ctx.resetTransform()
// 保存变换前的上下文状态
ctx.save()
ctx.translate(2, 2)
ctx.scale(2, 2)

// 创建Path2D对象并绘制路径
const path = new Path2D()
path.moveTo(30, 50)
path.lineTo(150, 100)

// 用上下文绘制路径
ctx.strokeStyle = 'red'
ctx.stroke(path)

// 恢复上下文状态
ctx.restore()

// 获取上下文变换矩阵，将其应用到原始Path2D，生成带变换的Path2D
const transformedPath = new Path2D()
transformedPath.addPath(path, ctx.getTransform())

// 后续可直接使用transformedPath

方案二：计算变换后的坐标，直接构建Path2D #

如果已经基于变换后的上下文绘制了路径，可以手动计算每个点变换后的绝对坐标，再用这些坐标构建Path2D：

ctx.resetTransform()
ctx.translate(2, 2)
ctx.scale(2, 2)

// 原始路径点
const originalPoints = [{x:30, y:50}, {x:150, y:100}]
// 获取当前上下文的变换矩阵
const matrix = ctx.getTransform()
// 计算每个点变换后的坐标
const transformedPoints = originalPoints.map(point => {
  return {
    x: point.x * matrix.a + point.y * matrix.c + matrix.e,
    y: point.x * matrix.b + point.y * matrix.d + matrix.f
  }
})

// 构建带变换坐标的Path2D
const path = new Path2D()
path.moveTo(transformedPoints[0].x, transformedPoints[0].y)
path.lineTo(transformedPoints[1].x, transformedPoints[1].y)

// 绘制验证
ctx.strokeStyle = 'red'
ctx.stroke()

// 现在path就是对应变换后路径的Path2D对象

注意：直接通过ctx.beginPath()绘制的路径没有公开API可以直接导出为Path2D，所以必须提前用Path2D构建，或者事后计算变换后的坐标重新构建。

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