在HTML Canvas中定位绘制的形状

Question

我有一个复杂的形状，它是从SVG文件中生成的，我们正在将图像剪切到画布中。

但是，所有贝塞尔曲线坐标都基于0,0。我们的形状尺寸根据画布的大小（根据用户的屏幕宽度进行缩放）来缩放。

有没有办法拍摄已经绘制的形状，然后将其移动到画布上的某个位置？很像ctx.scale（＃，＃）会缩放绘制的形状吗？

谢谢！

Answer 1

使用ctx.translate()更改画布上项目的位置。

请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations#Translating

使用translate将改变随后在画布上绘制的所有内容的位置。如果你只想移动一件事，你可以这样做：

ctx.translate(x,y);
// draw something
ctx.translate(-x,-y);

或者你可以这样做：

ctx.save();
ctx.translate(x,y);
// draw something
ctx.restore();