这是考虑到 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>
最佳答案
您只需要使用您看到的 clientX 和边界矩形进行转换，如下所示，在本教程中:
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
关于javascript - html5 在 Canvas 中捕获鼠标点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17016493/