建议在 canvas 上绘制 SVG 路径

Question

我有以下 SVG 元素：

<svg
    viewBox="0 0 1000 1000"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    aria-label="The Moon"
    role="img"
    unselectable="on"
    tabindex="-1"
    draggable="false"
    class="absolute -z-10 top-full right-full"
    data-phase="0.9033397192448547"
    data-age="26.676153687326483"
  >
    <path d="m500,0 a10,10 0 1,1 0,1000 a10,10 0 1,1 0,-1000" fill="rgba(255, 255, 255)"></path>
    <path d="m500,0 a10,10 0 1,1 0,1000 a10,10 0 1,1 0,-1000" fill="rgba(31, 41, 55, 0.60)"></path>
    <path d="m500,0 a 6.133588769794187,10 0 1, 0 0,1000 a10,10 0 1, 1 0,-1000" fill="#fff"></path>
  </svg>

但是，我想知道......可以使用以下方法绘制这些路径：

ctx.beginPath()

const p = new Path2D(
    `m${radius},0 a 6.133588769794187,10 0 1, 0 0,${radius * 2} a10,10 0 1, 1 0,${radius * -2}`
)

p.moveTo(x - radius / 2, y - radius / 2)

ctx.stroke(p)
ctx.fill(p)
ctx.closePath()

但是，它似乎不想在我指定的 position [x,y] 处绘制路径，它只是将它放在我的 canvas 的左上角...

我似乎无法参考如何将 2D 路径放置在某个 x 和 y 坐标...

我也试过这个，但同样令人沮丧的结果：

ctx.strokeStyle = '#fff'
ctx.lineWidth = 1
ctx.fillStyle = '#fff'

const p = new Path2D()

p.moveTo(x - radius / 2, y - radius / 2)

p.addPath(
    new Path2D(
        `m${radius},0 a 6.133588769794187,10 0 1, 0 0,${radius * 2} a10,10 0 1, 1 0,${radius * -2}`
    )
)

ctx.stroke(p)
ctx.fill(p)

ctx.closePath()

任何指路明灯都会令人惊叹！

Answer 1

您的路径声明的相关命令不会像您预期的那样工作。
它们将在创建内部 Path2D 时被解析，它还没有端点，因此它们都将相对于初始0,0点。
一旦创建了这个内部 Path2D，声明使用相对方法的事实就会丢失，所有这些点都在内部转换为绝对坐标。 因此，您将调用addPath(path)的最终 Path2D 的最后一点无关紧要。

要做你想做的事，你有几个解决方案：

• 您可以在路径声明前添加Mx,y ：

 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); ctx.strokeStyle = '#fff' ctx.lineWidth = 1 ctx.fillStyle = '#fff' const radius = 50; const x = 150; const y = 70; const p = new Path2D(`M${x - radius / 2},${y - radius / 2}m${radius},0 a 6.133588769794187,10 0 1, 0 0,${radius * 2} a10,10 0 1, 1 0,${radius * -2}`); ctx.stroke(p) ctx.fill(p)

 <canvas></canvas>

尽管采用这种方式，您甚至可以删除以下m并将其合并到M计算中：

 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); ctx.strokeStyle = '#fff' ctx.lineWidth = 1 ctx.fillStyle = '#fff' const radius = 50; const x = 150; const y = 70; const p = new Path2D(`M${x - radius / 2 + radius},${y - radius / 2}a 6.133588769794187,10 0 1, 0 0,${radius * 2} a10,10 0 1, 1 0,${radius * -2}`); ctx.stroke(p) ctx.fill(p)

 <canvas></canvas>

或者您可以使用上下文变换矩阵 (CTM) 移动路径实际绘制的位置：

 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); ctx.strokeStyle = '#fff' ctx.lineWidth = 1 ctx.fillStyle = '#fff' const radius = 50; const x = 150; const y = 70; const p = new Path2D(`m${radius},0 a 6.133588769794187,10 0 1, 0 0,${radius * 2} a10,10 0 1, 1 0,${radius * -2}`); // set x, y through CTM ctx.translate(x - radius / 2, y - radius / 2); ctx.stroke(p) ctx.fill(p) // reset CTM to defaults ctx.setTransform(1, 0, 0, 1, 0, 0);

 <canvas></canvas>

或者您可以使用Path2D.addPath(path, matrix)的matrix参数直接转换路径：

 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); ctx.strokeStyle = '#fff' ctx.lineWidth = 1 ctx.fillStyle = '#fff' const radius = 50; const x = 150; const y = 70; const p1 = new Path2D(`m${radius},0 a 6.133588769794187,10 0 1, 0 0,${radius * 2} a10,10 0 1, 1 0,${radius * -2}`); const p = new Path2D(); const matrix = { e: x - radius / 2, f: y - radius / 2 }; p.addPath(p1, matrix); ctx.stroke(p); ctx.fill(p);

 <canvas></canvas>

这些解决方案中的每一个都有自己的优势，第一个可能更容易阅读，CTM 是最好的，以防你想每帧更改 Path2D 的 position，如果你需要填充 Path2D，最后一个是最好的带有图案或渐变（也会受到 CTM 的影响）。