Question

我有一个HTML canvas元素，并且已经实现了一个画笔，可以捕获canvas元素的mousedown，mousemove和mouseup事件。这一切都适用于在画布上绘图。但是，我不认为如果你的鼠标在画笔中间离开画布，我怎么能继续画画。它只是削减它。在我看来，这对这个人来说非常无情，而且用户不太友好。

如果您打开Microsoft Paint并开始使用画笔或椭圆等绘图，只要您在画布中开始，您就可以将鼠标拖动到屏幕上的任何位置，并在任何地方重新进入画布。例如，它还可以轻松地在角落中绘制四分圆，因为您可以将椭圆工具拖离屏幕。我希望这是有道理的。

无论如何，我想知道是否有办法用HTML5画布实现这个，或者我将如何实现这类事情。用户永远不必真正看到那边的任何东西;它主要只是一个可用性功能。

编辑：很多这些解决方案的问题是如何处理坐标。目前我的画布位于屏幕中间，画布的左上角是(0, 0)，右下角是(500, 500)。还必须考虑坐标的翻译工作。

Edit2：我发现显然你可以画出画布边界就好了。例如，您可以提供负宽度，高度和坐标，canvas元素可以很好地处理它。所以基本上解决方案可能只涉及捕获文档的mousemove和mouseup，只是将x和y翻译为从画布开始左上角。

Answer 1

以下是重新输入画布时可以继续绘制的一种方法：

创建一个全局变量，并在mousedown上将其设置为true
为mouseup添加一个全局事件，以便您可以捕获是否有人在外面执行此操作画布，如果是这样，将全局变量设置为false，并且canvas元素的mouseup当然也需要设置相同的变量
在mousemove上，在绘制

要绘制画布的“外部”，就像角落中的四分圆一样，我会将所有事件作为全局处理程序移动到文档级别，并在单击时捕获canvas元素并传递其客户端坐标以使用文档坐标进行计算

Answer 2

这是一个非常粗略的初稿，说明如何在窗口而不是画布上监听鼠标事件，以便能够连续绘制：

var logger = document.getElementById("logger"),
  mState = document.getElementById("mState"),
  mX = document.getElementById("mX"),
  mY = document.getElementById("mY"),
  cX = document.getElementById("cX"),
  cY = document.getElementById("cY"),
  c = document.getElementById("canvas"),
  ctx = c.getContext("2d");

var mouse = {
  x: 0,
  y: 0,
  state: ""
};

function printCanvasLocation() {
  var b = c.getBoundingClientRect();
  cX.innerHTML = b.top;
  cY.innerHTML = b.left;
}

function setState(mouseE, state) {
  mouse.x = mouseE.clientX;
  mouse.y = mouseE.clientY;

  mX.innerHTML = mouseE.clientX;
  mY.innerHTML = mouseE.clientY;
  if (state) {
    mState.innerHTML = state;
    mouse.state = state;
  }
}

window.addEventListener("mousedown", function(mouseE) {
  setState(mouseE, "down");
});

window.addEventListener("mouseup", function(mouseE) {
  setState(mouseE, "up");
});

window.addEventListener("mousemove", function(mouseE) {
  var offset = c.getBoundingClientRect();

  var fix = {
    x1: (mouse.x - offset.left),
    y1: (mouse.y - offset.top),
    x2: (mouseE.clientX - offset.left),
    y2: (mouseE.clientY - offset.top)
  };

  if (mouse.state === "down") {
    ctx.moveTo(fix.x1, fix.y1);
    ctx.lineTo(fix.x2, fix.y2);
    ctx.strokeStyle = "#000";
    ctx.stroke();
  }
  setState(mouseE);
});

window.addEventListener("resize", function() {
  printCanvasLocation();
});

printCanvasLocation();

            .center {

              text-align: center;

            }

            canvas {

              background-color: lightblue;

            }

<main>
  <div class="center">
    <canvas id="canvas" width="128" height="128">If you can see me, you should update your browser</canvas>
  </div>
  <div id="logger" role="log">
    <span>State: </span><span id="mState">Unknown</span>
    <span>X: </span><span id="mX">Unknown</span>
    <span>Y: </span><span id="mY">Unknown</span>
    <span>Canvas X: </span><span id="cX">Unknown</span>
    <span>Canvas Y: </span><span id="cY">Unknown</span>
  </div>
</main>

Answer 3

一种解决方案是从字面上使画布成为窗口的大小，并以此缩放它的大小。画布几乎可以是透明的。

我敢肯定，还有一种方法可以进行鼠标事件，如果需要的话，可以先通过画布，然后再传递到后面的元素。（请参阅：“ js事件冒泡和捕获”。）

但是您将拥有绝对的控制权，并且能够在任何地方绘制任何东西。

如何在HTML canvas元素之外绘制？

3 个答案: