我正在尝试制作一个“绘图”应用程序，它允许用户通过将鼠标拖到 Canvas 上来绘制一些东西。
我想在用户拖动鼠标的位置绘制一个“像素”，但是:鼠标的位置与绘制“像素”的位置不同。 我在互联网上搜索过，但我不知道我的版本和他们的版本有什么区别。
图片:
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drawer</title>
<script src="jquery-2.2.1.min.js"></script>
<script src="scripting/draw.js"></script>
</head>
<body>
<canvas id="drawGround" style="width: 500px; height: 500px; margin: 0 auto; border: 1px solid black;"></canvas>
</body>
</html>
代码:
$(document).ready(function() {
var drawSize = 3;
var canDrawCanvas = false;
const canvasID = "#drawGround";
document.onmouseup = function() {
canDrawCanvas = false;
};
$(canvasID).mousedown(function() {
canDrawCanvas = true;
});
$(canvasID).mousemove(function(event) {
if (canDrawCanvas) handleDrawing(event);
});
function handleDrawing(mouseEvent) {
var canvas = document.getElementById(canvasID.substring(1));
var context = canvas.getContext('2d');
context.fillRect(mouseEvent.pageX, mouseEvent.pageY, drawSize, drawSize);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="drawGround" style="width: 500px; height: 500px; margin: 0 auto; border: 1px solid black;"></canvas>最佳答案
不应使用“样式”属性缩放 Canvas 对象，而应使用 Canvas 元素中的“宽度”和“高度”属性。
<canvas id="drawGround" width="500px" height="500px" style="margin: 0 auto; border: 1px solid black;"></canvas>
然后使用offsetX 和offsetY 参数代替pageX 和pageY 来获取提示的位置鼠标:
function handleDrawing(mouseEvent) {
var canvas = document.getElementById(canvasID.substring(1));
var context = canvas.getContext('2d');
context.fillRect(mouseEvent.offsetX, mouseEvent.offsetY, drawSize, drawSize);
}
关于javascript - JQuery/Javascript - 鼠标位置完全关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35919776/