HTML5 canvas zoom 마우스 위치 좌표

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