Canvas HTML5画布：绝对缩放其内容

我想重新缩放画布的内容，因此在循环中，我使用

rescale

函数。然而，正如我所预料的，它的工作原理与本例相同：1->2->4->8（系数=2）。我想要的是…：1->3->5->7（系数=2）。所以我不应该使用

比例

，但是什么函数呢

请注意，默认情况下，我不想也不能使用CSS或canvas的JSAPI以外的其他东西。但是，如果没有解决方案，请告诉我您的解决方案，即使它依赖于CSS…

绝对比例 您可以通过将当前变换替换为

ctx.setTransform

所有其他变换函数

ctx.scale

，

ctx.translate

，

ctx.rotate

，

ctx.transform

将变换应用于现有变换。这就是为什么你的音阶每次都会翻倍（2,4,8,16）

因此，要设置一个绝对刻度

scale = 1;
ctx.setTransform(scale, 0, 0, scale, 0, 0);

按3的比例缩放

scale += 2;
ctx.setTransform(scale, 0, 0, scale, 0, 0);

若要按5缩放，请再次添加2

scale += 2;
ctx.setTransform(scale, 0, 0, scale, 0, 0);

注意这将替换任何现有转换

设置完全一致变换的步骤

function setTransform(ctx, x, y, scale, rotate) {
    ctx.setTransform(
         Math.cos(rotate) * scale, Math.sin(rotate) * scale,  // x axis
        -Math.sin(rotate) * scale, Math.cos(rotate) * scale,  // y axis is 90deg CW from x axis
        x, y  // translation as absolute sets origin in px from top left of canvas
    );
}

---

很抱歉打字错误我用天平。不是重新缩放。我通过给它1.0001作为参数来使用scale。但是，由于它重新缩放画布内容，在下一次迭代中，它将考虑新的大小。我不想要那种行为，我不明白为什么它会起作用^^