Question

我正在制作游戏，我需要放大画布。我已经阅读了很多关于如何放大画布的内容，ctx.scale（）是否适当，事情是，我想用两个手指放大。

我已经有了缩放功能，但它是从顶部/左侧画布缩放，而不是在我的手指中间。我有手指1和手指2之间的中点，但我不知道如何放大到特定的中间点！

这个例子总结了我需要的东西（我只需要缩放）： Zoom Canvas to Mouse Cursor

它的工作非常好，但是还有方向盘！

如果你们有任何想法，我会很高兴谈谈！：）

谢谢大家！

Answer 1

我添加了触摸事件...现在你需要找到evt.touches数组中所有点的中间位置（每个点都有一个clientX和clientY，以及其他属性）

您还需要跟踪这些点之间的距离，以便更改缩放级别。

这个垃圾箱可以帮到你（查看第46行）http://jsbin.com/dived/1/edit?js,output

Answer 2

如果您有要缩放的中心点，可以使用CanvasRenderingContext2D提供的翻译工具：

void translate(
   in float x,
   in float y
);

因此，当您在变量ctx中使用画布上下文时

ctx.translate(x, y);

然后

ctx.scale(x, y);

ctx.translate(x, y)将原点放置到x，y坐标。默认情况下，CanvasRenderingContext2D的原点是0,0（http://www.w3.org/TR/2dcontext/），这就是缩放来自左上角的原因。