HTML5 Canvas -混合多个translate()和scale()调用

HTML5 Canvas - Mixing multiple translate() and scale() calls

本文关键字：scale 调用 translate Canvas 混合 HTML5      更新时间：2023-09-26

我只是想知道画布转换是如何工作的。假设我有一个画布，里面画了一个圆，我想缩放这个圆，这样它的中心点就不会移动。所以我想做以下事情:

translate(-circle.x, -circle.y);
scale(factor,factor);
translate(circle.x,circle.y);
// Now, Draw the circle by calling arc() and fill()

这样做对吗?我只是不明白画布是否被设计成能记住我调用转换的顺序。

谢谢。

是的，你是正确的。

画布累积所有的转换，并将它们应用到任何未来的绘图。

所以如果你缩放2X，你的圆将以2X绘制…并且(!)之后的每次绘制都将是2X。

在这里保存上下文是有用的。

如果你想把你的圆按2X缩放，但随后的每个绘图都是正常的1X，你可以使用这个模式。

// 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();

在上下文。

相关文章：