Question

我试图制作一个＆＃39; draw＆＃39;应用程序，允许用户通过在画布上拖动鼠标来绘制内容。

我想画一个像素＆＃39;然而，用户拖动鼠标的位置：鼠标的位置和“像素”的位置。得出的是不一样的。我在互联网上搜索过，但我不知道我的版本和他们的版本有什么不同。

图片：

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>

代码：

＆＃13;

$(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);
  }

});

＆＃13;

<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>

＆＃13;

Answer 1

而不是使用＆＃34;样式＆＃34;来缩放画布对象。属性，你应该使用＆＃34; width＆＃34;和＆＃34; height＆＃34; -attributes在canvas-element中。

<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);
}

JQuery / Javascript - 完全关闭鼠标位置

1 个答案: