用鼠标在 JavaScript 中绘制一个矩形

Question

我是一名 JavaScript 初学者，想创建我的第一个网站。

我有一个矩形，我想用鼠标在这个矩形内再画一个。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(0, 20, canvas.width, 50);
context.fillStyle = "blue";
context.fill();

var canvasOffset;
var offsetX;

var startX

canvasOffset = $("#myCanvas").offset();
offsetX = canvasOffset.left;

canvas.addEventListener("mousedown", function() {
  canvas.style.cursor = "ew-resize";

  startX = parseInt(event.clientX - offsetX);
  document.getElementById("info").innerHTML = "X position: " + startX;
});

canvas.addEventListener("mouseup", function() {
  canvas.style.cursor = "default";

  var mouseX = parseInt(event.clientX - offsetX);

  context.beginPath();
  context.rect(startX, 20, mouseX - startX, 50);
  context.fillStyle = "red";
  context.fill();

  document.getElementById("info").innerHTML = "X old: " + startX + " - X new :" + (mouseX) + " - Length: " + (mouseX - startX);
});

body {
  background-color: ivory;
}

header {
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
}

section {
  text-align: center;
  background-color: green;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

footer {
  background-color: black;
  color: white;
  clear: both;
  text-align: center;
  padding: 5px;
}

canvas {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 80%;
  height: 90px;
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <h1></h1>
</header>
<section>
  <canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>
  <p id="info"></p>
</section>
<footer>David Kester</footer>

如果你尝试蓝色矩形，你就会明白我想要什么。问题是如果我们单击到释放鼠标的位置，新的矩形将不会被绘制。它有一个偏移量。

我不知道是什么问题，可能是偏移量和坐标的问题。但我已经尝试过其他人的实现，但它不适用于我。

难道是我在搞乱像素和非像素？在 CSS 中我有像素。

Answer 1

您的主要问题是您仅使用 css 设置画布的大小，这会导致拉伸问题。只要您考虑拉伸因子（缩放），就可以这样做。如果在加载窗口后调整窗口大小，您还需要考虑画布的偏移量会发生变化，因此您需要使用以下代码启动事件。

var scale = canvas.attr("width") / canvas.width(),
    offsetX = $("#myCanvas").offset().left;

您还需要设置画布宽度和高度属性才能正常工作。您可以将宽度设置为任何值，但数字越大细节越好。

<canvas id="myCanvas" width="300" height="90">
    Your browser does not support the HTML5 canvas tag.
</canvas>

另一个技巧是更多地使用jQuery函数进行事件处理、元素选择和属性设置。

var canvas = $("#myCanvas");
...
canvas.mouseup(function () {
    ...
    canvas.attr("cursor", "ew-resize");
    ...
});
...
canvas.mousedown(function () {
    ...
});

这是一个功能代码sn-p：

var canvas = $("#myCanvas"),
  context = canvas[0].getContext("2d"),
  startX;

context.rect(0, 20, canvas[0].width, 50);
context.fillStyle = "blue";
context.fill();

canvas.mousedown(function() {
  var scale = canvas.attr("width") / canvas.width(),
    offsetX = $("#myCanvas").offset().left;

  canvas.attr("cursor", "ew-resize");

  startX = parseInt((event.clientX - offsetX) * scale);
  document.getElementById("info").innerHTML = "X position: " + startX;
});

canvas.mouseup(function() {
  var scale = canvas.attr("width") / canvas.width(),
    offsetX = $("#myCanvas").offset().left;

  canvas.attr("cursor", "default");

  var mouseX = parseInt((event.clientX - offsetX) * scale);

  context.beginPath();
  context.rect(startX, 20, mouseX - startX, 50);
  context.fillStyle = "red";
  context.fill();

  document.getElementById("info").innerHTML = "X old: " + startX + " - X new :" + (mouseX) + " - Length: " + (mouseX - startX);
});

body {
  background-color: ivory;
}

header {
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
}

section {
  text-align: center;
  background-color: green;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

footer {
  background-color: black;
  color: white;
  clear: both;
  text-align: center;
  padding: 5px;
}

canvas {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 80%;
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>

  <h1></h1>

</header>
<section>
  <canvas id="myCanvas" width="300" height="90">Your browser does not support the HTML5 canvas tag.</canvas>
  <p id="info"></p>
</section>
<footer>David Kester</footer>

Source