HTML5画布缩放鼠标坐标

Question

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

鼠标事件只在中心缩放mousewheel

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();