HTML5画布缩放鼠标坐标的位置

Question

如何使用鼠标坐标的图纸缩放背景图像。

仅使用鼠标事件鼠标滚轮

进行缩放

me code: http://jsfiddle.net/gamealchemist/74MCQ/4/

带有 mousedown 和 mousemove 事件的图纸

我需要缩放鼠标在图像上的位置，如谷歌地图。

Answer 1

带注释的代码和演示：http://jsfiddle.net/m1erickson/asT8x/

// clear the canvas

ctx.clearRect(0,0,canvas.width,canvas.height);

// save the context state

ctx.save();

// translate to the coordinate point you wish to zoom in on

ctx.translate(mouseX,mouseY);

// scale the canvas to the desired zoom level

ctx.scale(scale,scale);

// draw the image with an offset of -mouseX,-mouseY
// (offset to center image at the selected zoom point);

ctx.drawImage(img,-mouseX,-mouseY);

// restore the context to its untranslated/unrotated state

ctx.restore();