在固定点，javascript / canvas上实现缩放

Question

  

可能重复：
  Zoom in on a point (using scale and translate)

我想用鼠标滚轮实现鼠标指针的缩放。这是缩放图像，而鼠标指针下的点保持固定。

这是我的代码，但效果不佳

var scala = 1 + event.wheelDelta / 1000;
canvas.context.translate(-canvas.mouse.x * ( scala - 1 ) / canvas.scale,-canvas.mouse.y * ( scala - 1 ) / canvas.scale);
canvas.context.scale(scala,scala);
canvas.scale *= scala;
//canvas.scale is my variable that is initially set to 1.
//canvas.mouse is my variable that represents the mouse position relative to the canvas

Answer 1

不看其他任何内容，你需要2个翻译：一个用于将鼠标指针移动到（0,0），一个用于移动（0,0）（现在使用缩放图片）到老鼠是。

Answer 2

解决了问题，答案就在这里：same question

Answer 3

我的猜测是，如果要保存缩放级别，则需要在每次重绘后执行canvas.context.restore()。