Javascript 缩放画布Path2d（使用svg路径数据）而不缩放整个画布？

我在一个画布中有多个Path2D，我希望能够独立地缩放和定位它们，而不是调整context.scale（）和context.translate（）。我正在使用SVG路径数据构建每个path2D对象，因为我希望能够修改笔划划线和笔划长度

似乎我可能无法使用Path2D实现这一点，解决这一问题的最佳方法是什么

我正在考虑一些可能的选择：

在svg源代码中使用drawImage方法

将svg路径数据转换为画布路径弧（可能使用库）

调整实际svg路径数据，并为每个绘制重建Path2D对象

编辑：

我建立了这个代码笔，我试图将p1移动到p2，而不改变p2的位置。当我转换上下文时，两个对象都会移动。仅调整p1位置的最佳方法是什么

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var p1x = 0
var p1 = new Path2D("M1 0 h 100 v 50 h -100 Z");
var p2 = new Path2D("M200 0 h 50 v 25 h -50 Z");

setInterval(() => {
  p1x = p1x + 1
  ctx.translate(0, 0)
  ctx.clearRect(0, 0, 300, 300)
  ctx.translate(p1x, 0)
  ctx.fill(p1)
  ctx.fill(p2)    
}, 1000)

---

您可以将翻译仅应用于第一个元素：

setInterval(() => {
    p1x = p1x + 1;
    ctx.clearRect(0, 0, 300, 300);
    ctx.save();
    ctx.translate(p1x, 0);
    ctx.fill(p1);
    ctx.restore();
    ctx.fill(p2);
}, 1000);

可以将该方法与第二个变换参数结合使用来缩放路径

const m = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix()
const p = new Path2D()
const t = m.scale(0.5)
p.addPath(p1, t)

---

实施示例：

var canvas=document.getElementById（“canvas”）
var ctx=canvas.getContext（“2d”）
变量p1x=0
变量p1=新路径2D（“M1 0 h 100 v 50 h-100 Z”）
变量p2=新路径2D（“M200 0 h 50 v 25 h-50 Z”）
var m=document.createElements（“http://www.w3.org/2000/svg“，“svg”）.createSVGMatrix（）
设置间隔（（）=>{
p1x=p1x+1
常数p=新路径2d（）
常数t=m.translate（p1x，0）
p、 添加路径（p1，t）
ctx.clearRect（0，0，300，300）
ctx.填充（p）
ctx.填充（p2）
}，1000）

画布{
边框：1px纯蓝色；
高度：300px；
宽度：300px；
}

---

由于Chrome不再是

Path2D.addPath（）

，如果您想要Chrome兼容性而不需要实验标志，您需要在上下文上设置转换，我认为没有其他方法

也就是说，您只需在进行调整之前/之后

save（）

和

restore（）

上下文即可。从上面更新您的示例：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var p1x = 0
var p1 = new Path2D("M1 0 h 100 v 50 h -100 Z");
var p2 = new Path2D("M200 0 h 50 v 25 h -50 Z");

setInterval(() => {
  p1x = p1x + 1
  ctx.clearRect(0, 0, 300, 300);
  ctx.save();            // Save the previous translation context
  ctx.translate(p1x, 0); // Adjust context to where you want to draw p1
  ctx.fill(p1);
  ctx.restore();         // Restore the context before drawing p2
  ctx.fill(p2)    
}, 1000)

---

我不知道你现在在做什么，也不知道你想要什么。有一种方法，我看不出为每个路径调用

scale

和

translate

有什么问题（可以使用

ctx.setTransform（1,0,0,1,0,0）

）。你能澄清一下吗？也许一个代码示例会有所帮助。@kaido刚刚添加了一个copepen，希望澄清addpath不是Chrome@mofojed哦，我不知道。。。MDN的“兼容性表”表示支持Chrome桌面。但现在它已经消失了：然而，总有一天它会回来的：现在，您可以启用

实验CanvasFeatures

-标志。。。