坐标查看器3

// 取得鼠标位置实际上是相对于window的，而canvas有自己的一套坐标系，所以需要在这里进行转换，下面的函数额外实现了当canvas与绘制大小不一致时坐标的位置缩放
function windowToCanvas(canvas, x, y) {
   var bbox = canvas.getBoundingClientRect();
   return { x: x - bbox.left * (canvas.width  / bbox.width),
            y: y - bbox.top  * (canvas.height / bbox.height)
          };
}

function drawGuidelines(x, y) {
   context.save();
   context.strokeStyle = 'rgba(0,0,230,0.8)';
   context.lineWidth = 0.5;
   context.beginPath();//水平
   context.moveTo(0,y + 0.5);
   context.lineTo(context.canvas.width, y + 0.5);
   context.stroke();
   
   context.beginPath();//垂直
   context.moveTo(x + 0.5, 0);
   context.lineTo(x + 0.5, context.canvas.height);
   context.stroke();
   
   context.fillText(Math.round(x)+"-"+Math.round(y), x, y);//添加文字
   context.restore();
}


// Event handlers............注意在每次更新线之前都要clearRect()清除画布内容，因为不是键盘事件，所以可以直接加在canvas上.........................................
canvas.onmousemove = function (e) {
   var loc = windowToCanvas(canvas, e.clientX, e.clientY);
   drawGuidelines(loc.x, loc.y);
};