HTML5 canvas zoom其中鼠標座標

Question

如何使用鼠標座標的圖紙縮放背景圖像。

僅在中心與鼠標事件滾輪

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

附圖與鼠標按下和鼠標移動事件

我需要放大上像一個圖像，其中鼠標位置變焦谷歌地圖。

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