Question

我只是想知道Canvas转换是如何工作的。可以说我有一个画布，里面画了一个圆圈，我想缩放圆圈，所以它的中心点不会移动。所以我考虑做以下事情：

translate(-circle.x, -circle.y);
scale(factor,factor);
translate(circle.x,circle.y);

// Now, Draw the circle by calling arc() and fill()

这是正确的方法吗？我只是不明白画布是否设计为记住我称之为变换的顺序。

感谢。

Answer 1

是的，你是对的。

画布累积所有变换并将其应用于任何将来的绘图。

因此，如果你缩放2X，你的圆圈将被绘制为2X ......并且（！）之后的每次抽奖将是2X。

这就是保存上下文有用的地方。

如果你想将你的圆圈缩放2倍，然后让每个后续绘图都达到正常的1倍，你可以使用这个模式。

// save the current 1X context
Context.save();

// move (translate) to where you want your circle’s center to be
Context.translate(50,50)

// scale the context
Context.scale(2,2);

// draw your circle
// note: since we’re already translated to your circles center, we draw at [0,0].
Context.arc(0,0,25,0,Math.PI*2,false);

// restore the context to it’s beginning state:  1X and not-translated
Context.restore();

在Context.restore之后，您的翻译和比例将不适用于其他图纸。

HTML5 Canvas - 混合多个translate（）和scale（）调用

1 个答案: