我对如何在HTML画布中实现放大点感到困惑。我已经阅读了有关它的所有其他帖子，但有一个问题对我来说仍然不明确。
所以，我完全理解放大到点的概念 - 首先将所需的缩放中心转换为原点，缩小/缩小，转换回来。因此，如果我希望按因子p1缩放点k1，然后再按因子p2在点k2周围缩放，我将首先转换为带变换{{1}的原点}，使用T1 = T(-p1.x, -p1.y)缩放系数S1(k1)，然后翻译回k1。
然后再次围绕T1' = T(p1.x, p1.y)执行相同操作：使用p2翻译为原点，使用因子T2 = T(-p2.x, -p2.y)缩放S2(k2)，然后使用k2翻译。因此，这两个缩放操作会将给定点T2' = T(p2.x, p2.y)转换为q，其中包含以下内容：
q'现在假设我想用HTML canvas实现它。我希望以下几行能够实现它：
q' = (T2' * S2 * T2) * (T1' * S1 * T1) * q
但是，由于HTML canvas后乘法转换，这段代码将被解释为：
// First zoom around p1
context.translate(-p1.x, -p1.y); // T1 - translate to origin
context.scale(k1,k1); // S1 - scale
context.translate(p1.x, p1.y); // T1' - translate back
// Then zoom around p2
context.translate(-p2.x, -p2.y); // T2 - translate to origin
context.scale(k2,k2); // S2 - scale
context.translate(p2.x, p2.y); // T2' - translate back
这显然不会产生我想要的东西 - 乘法顺序不是我想要的。
为什么会那样？我缺少什么直觉？当我从上到下阅读这段代码时，我的直觉是转换应该预先倍增。
谢谢！