html5在画布中捕捉鼠标点击_Html_Javascript Events

html5在画布中捕捉鼠标点击

html

html5在画布中捕捉鼠标点击,html,javascript-events,Html,Javascript Events,下面是考虑到nycnik建议的答案的简化代码。代码工作得更好，但比例和偏移仍然处于关闭状态。单击“拖动并释放”，绘制的线看起来大约为2倍 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="st.css" media="all"/> <script> var x, y; function getXY(canvas, e)

下面是考虑到nycnik建议的答案的简化代码。代码工作得更好，但比例和偏移仍然处于关闭状态。单击“拖动并释放”，绘制的线看起来大约为2倍

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="st.css" media="all"/>
    <script>
var x, y;
function getXY(canvas, e) {
    var rect = canvas.getBoundingClientRect();
    return [e.clientX - rect.left, e.clientY - rect.top];
}

function move(ca, e) {


}

function mark(ca, e) {
    [x,y] = getXY(ca, e);
}

function clickDrag(ca, e) {
    var c = ca.getContext("2d");
    var x2, y2;
    [x2,y2] = getXY(ca, e);
    c.fillStyle='#00FF80';
    c.lineStyle='#FFFF80';
    c.moveTo(x,y);
    c.lineTo(x2,y2);
    c.stroke();  
}
    </script>
  </head>
  <body>
    <div class="bg">
      <canvas id="q13g" onmousedown="mark(this,event)" onmouseup="clickDrag(this, event)">
      </canvas>
    </div>
  </body>
</html>


变量x，y；
函数getXY（画布，e）{
var rect=canvas.getBoundingClientRect（）；
返回[e.clientX-rect.left，e.clientY-rect.top]；
}
功能移动（ca，e）{
}
功能标记（ca，e）{
[x，y]=getXY（ca，e）；
}
功能点击拖动（ca，e）{
var c=ca.getContext（“2d”）；
变量x2，y2；
[x2，y2]=getXY（ca，e）；
c、 fillStyle='#00FF80'；
c、 线条样式='#FFFF80'；
c、 moveTo（x，y）；
c、 lineTo（x2，y2）；
c、 笔划（）；
}

您只需要使用您看到的clientX和边框进行转换，如下所示，以及本教程中所示：

function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }

这似乎固定了偏移量，但没有固定刻度。坐标的比例似乎仍然超过了2:1，正如Ken在下面所说，这个比例与画布的大小有关。您的代码没有显示任何画布大小调整