javascript - 如何在 HTML5 Canvas 中平滑缩放图案图像？

Question

我正在使用 setTransform 来缩放我的背景图案图像。刻度从1开始，每次刻度减少0.01，直到达到0.5。

这是缩放代码:

context.setTransform(scale, 0, 0, scale, position.x, position.y);

在更新中:

scale -= 0.01;

使用上面的代码，当我对更改进行动画处理时，背景图案图像将正确替换为缩放后的图案图像。然而，过渡并不是很顺利。它的工作原理就像图像在短时间内突然闪现到另一幅图像，但很明显。我希望替换更加平滑且不易察觉，但我不知道如何实现该效果。

Answer 1

您可以使用translate()代替setTransform()

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

In short, you want to translate() the canvas context by your offset, scale() it to zoom in or out, and then translate() back by the opposite of the mouse offset. Note that you need to transform the cursor position from screen space into the transformed canvas context.

检查this问题以获取更多信息和实例。