获取鼠标点击相对于Canva位置的2种方法

如果给Canvas添加 onmousedown事件，获取到的鼠标位置都是相对于当前文档的位置（x,y）：

aaarticlea/png;base64,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MqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pZlggAzbMqT3pV0AsL1TL++K9L60U/+VAThLp17eFel9aaf+KwNwlk69vCvS+9JO/VcG4CydenlXpPelnfqvDMBZOvXyrkjvAaA/vQeA/vQeAPrTewDoT+8BoD+9B4D+9B4A+tN7AOhP7wGgP70HgP70HgD603sA6E/vAaA/vQeA/vQeAPrTewDoT+8BoD+9B4D+9B4A+tN7AOhP7wGgP70HgP70HgD603sA6E/vAaA/vQeA/vQeAPrTewDoT+8BoD+9B4D+9B4A+tN7AOhP7wGgP70HgP70HgD603sA6E/vAaA/vQeA/vQeAPrTewDoT+8BoD+9B4D+9B4A+tN7AOhP7wGgP70HgP70HgD603sA6E/vAaA/vQeA/vQeAPrTewDoT+8BoD+9B4D+9B4A+tN7AOhP7wGgP70HgP70HgD603sA6E/vAaA/vQeA/vQeAPrTewDoT+8BoD+9B4D+9B4A+tN7AOhP7wGgP70HgP70HgD603sA6E/vAaA/vQeA/vQeAPrTewDoT+8BoD+9B4D+9B4A+tN7AOhP7wGgP70HgP70HgD603sA6E/vAaA/vQeA/vQeAPrTewDoT+8BoD+9B4D+9B4A+tN7AOhP7wGgP70HgP70HgD603sA6E/vAaA/vQeA/vQeAPrTewDoT+8BoD+9B4D+9B4A+tN7AOhP7wGgP70HgP70HgD603sA6E/vAaA/vQeA/vQeAPrTewDoT+8BoD+9B4D+9B4A+tN7AOhP7wGgP70HgP70HgD603sA6O+ovXccx3Ecp8LRe8dxHMfpf/TecRzHcfofvXccx3Gc/kfvHcdxHKf/OXDvAYCzoPcA0J/eA0B/eg8A/f0/i/7dHSExcUEAAAAASUVORK5CYII=" alt="" />

第一种转换：

(x-x1,y-y1)

x,y为鼠标点击位置，getBoundingClientRect方法是canvas自带的获取可绘画区域的位置信息的函数

function windowToCanvas(x, y) {

   var bbox = canvas.getBoundingClientRect();

   return { x: x - bbox.left * (canvas.width  / bbox.width),

            y: y - bbox.top  * (canvas.height / bbox.height) };

}

第二种更加简洁：

canvas.onmousedown = function (e) {

   //var loc = windowToCanvas(e.clientX||e.x, e.clientY||e.y);

   var x=e.layerX||e.offsetX;

   var y=e.layerY||e.offsetY;

   e.preventDefault(); // prevent cursor change

   saveDrawingSurface();

   mousedown.x = loc.x;

   mousedown.y = loc.y;

   dragging = true;

};

只有firefox支持layerX,其他浏览器支持标准的offsetX

获取鼠标点击相对于Canva位置的2种方法的相关教程结束。