我有一张100％width和height的画布。
它是我正在处理的远程桌面的一部分。目前我被卡住了，因为鼠标位置无法正确反映画布上的位置。
当我将数据发送到桌面时，我必须补偿不同的屏幕尺寸。
var x = Math.floor( mouse.x / canvas.width * 100 );
var y = Math.floor( mouse.y / canvas.height * 100 );
但是，当我尝试在画布上绘制x和z值时，我得不到正确的位置。
我需要画布/我尝试使用百分比的原因是它将成为视频顶部的叠加层。并且用户必须在视频周围绘制一个矩形以获得偏移，因为视频通常会显示宽高比的黑色侧边栏。
以下是未将矩形放在正确位置的画布示例：
编辑：仅供参考：由于jsfiddle显然工作的方式，Firefox似乎没有正确运行jsfiddle。试试Chrome。
答案 0 :(得分：1)
我不确定你想要什么，但这里有两种可能的解决方案：
第一个允许您在缩放的画布中正确移动鼠标
第二个允许您从左上角到右下角绘制一个矩形。
你的问题在这里：
ctx.rect(x,y,x+10, y+ 10)
您使用的是x＆amp; y为百分比，而你需要它作为像素。
如果您有任何其他问题，请不要犹豫。