如何准确计算div背景的背景位置

我需要为绝对定位的div计算background-position属性。 请转到此url： HTML Canvas

从桌面上将800×600图像放在canvas上并hover鼠标。 你可以看到一个绝对定位的100×100 px div。 我将canvas上的对象保存为此div的背景图像。 但是，我对背景位置的计算出了问题。 整个想法是在这个div中显示图像的缩放部分。 可以在scripts文件夹中的“canvas_tut.js”中看到此代码。

$(div).mousemove(function(e){ //div refers to the absolutely pos div. var x_pos = (e.pageX-50)+'px'; //calculating left and top values var y_pos = (e.pageY-50)+'px'; $(div).css({'left':x_pos,'top':y_pos}); var dataUrl = canvas.toDataURL(); // Saving canvas as image $(div).css('background-image','url('+dataUrl+')'); var x_bg = '-'+Math.floor(e.pageX - canvas_offset.left)+'px'; //calculating background position var y_bg = '-'+Math.floor(e.pageY - canvas_offset.top)+'px'; console.log(x_bg+' , '+y_bg); $(div).css('background-position',x_bg,y_bg); })