html5画布绘图：用鼠标快速移动在它碰到画布边缘之前取消线条答案

【问题标题】：html5 canvas drawing: fast motion with mouse cancels line before it hits the edge of the canvashtml5画布绘图：用鼠标快速移动在它碰到画布边缘之前取消线条
【发布时间】：2016-02-24 04:53:52
【问题描述】：

到目前为止，该应用程序运行良好，除非线条绘制得非常快并离开画布边缘，然后线条不会绘制到画布边缘。它缺少一个部分。

我正在尝试解决问题：

canvasVar.addEventListener ('mouseout', clearPathIfMouseCursorLeavesCanvasFunc);

和

 function clearPathIfMouseCursorLeavesCanvasFunc(e){
 contextVar.beginPath(); // clears the path so buttonpresses dont connect the line
 mouseButtonHeld = false;

我尝试了一些方法，例如添加 settimeout();，但到目前为止没有任何效果。我不知道是什么原因造成的，我一直在寻找其他人是否有这个问题并解决了这个问题，但是我遇到的每个画布绘图应用程序都有同样的问题。

将线绘制到边缘并且识别用户的鼠标移动非常重要，而不仅仅是一条到鼠标离开画布的最后坐标的线。

我被这个问题困扰已经好几天了。非常感谢您的帮助！

完整代码：

// Varibale declaration
var canvasVar = document.getElementById('canvasHtmlElement');
var contextVar = canvasVar.getContext('2d');
var pointRadiusVar = 0.5;
var mouseButtonHeld = false;
var pointsArrPosition = 0;

//Arrays
var pointsArr = [];

// Varibale declration end

//canvas setup
canvasVar.width = window.innerWidth;
canvasVar.height = window.innerHeight;

//canvas setup end


//resize fix
window.onresize = function() {
    var tempImageVar = contextVar.getImageData(0, 0, canvasVar.width, canvasVar.height);
    canvasVar.width = window.innerWidth;
    canvasVar.height = window.innerHeight;
    contextVar.putImageData(tempImageVar, 0, 0);
  }
  //resize fix end

//functions

// Objects

function pointObject() {

  this.x = 0;
  this.y = 0;
  this.fill = '#444444';

}

function addFilledCircleFunc(x, y) {
  //alert('works1');
  var filledCircle = new pointObject;
  filledCircle.x = x;
  filledCircle.y = y;
  pointsArr.push(filledCircle);

  contextVar.lineWidth = 10; //pointRadiusVar * 2; // Line Width
  contextVar.lineTo(pointsArr[pointsArrPosition].x, pointsArr[pointsArrPosition].y);
  contextVar.stroke();
  //contextVar.beginPath();

  contextVar.fillRect(filledCircle.x, filledCircle.y, 1, 1);
  //contextVar.arc(filledCircle.x, filledCircle.y, pointRadiusVar, 0, Math.PI * 2);
  //contextVar.fill();
  //contextVar.lineWidth = 0.5;
  //contextVar.stroke();
  //contextVar.beginPath();


  pointsArrPosition++;
  //contextVar.moveTo(pointsArr[pointsArrPosition].x, pointsArr[pointsArrPosition].y);


  //alert(pointsArr[0].x);



}

//Objects end

// create circle on mouse clicked point while mousebutton is held
var addPointToCanvasVar = function(e) {
  if (mouseButtonHeld) {
    //alert('addpointfunc');
    addFilledCircleFunc(e.clientX, e.clientY);
  }
};

// MAKE SURE that lines work when drawn over the edge of the canvas

function clearPathIfMouseCursorLeavesCanvasFunc(e) {
  contextVar.beginPath(); // clears the path so buttonpresses dont connect the line
  mouseButtonHeld = false;
}

// end


// mouse Up/Down functions
var mouseDownVar = function(e) {
  //alert("mouseDown");
  addPointToCanvasVar(e); // add point on first click, not just when mousebutton is held
  mouseButtonHeld = true;

}

var mouseUpVar = function() {
  //alert("mouseUp");
  mouseButtonHeld = false;
  contextVar.beginPath(); // clears the path so buttonpresses dont connect the line
}

// mouse Up/Down Switch end


//functions end


//listeners

canvasVar.addEventListener('mousemove', addPointToCanvasVar);
canvasVar.addEventListener('mouseup', mouseUpVar);
canvasVar.addEventListener('mousedown', mouseDownVar);
canvasVar.addEventListener('mouseout', clearPathIfMouseCursorLeavesCanvasFunc);

//listeners end

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Confident Drawing</title>
</head>

<body style="margin: 0">
  <canvas id="canvasHtmlElement" style="display: block;">
    Your Browser does not support Canvas! Please update to a newer version.
  </canvas>

  <script src="main_0.06.js"></script>

</body>

</html>

如果你不明白我的意思：运行 sn-p 并在退出画布时尽可能快地画一条线。

【问题讨论】：

我不得不承认我不明白你的问题是什么，或者你想要达到什么目的......好吧我明白了，错过了“非常快”的部分
你到底想要什么？...我不清楚你的问题:(
您可以尝试解决此问题的方法是监听 body 上的 mousemove / mouseup 事件。
谢谢我试试看。我确实删除了canvasVar。在 addEventListener 之前，但它没有工作。
您想在鼠标按下+mouseout(out of canvas) 事件发生的地方在画布的角落画线吗？

标签： javascript html canvas

【解决方案1】：

当您在边缘快速绘制一条线时，线在边缘附近过早结束的原因是因为最后一个 mousemove 事件在鼠标仍在画布中并且刚好靠近边缘时触发，而下一个 @鼠标离开画布后触发 987654322@ 事件。要解决这个问题，只需在mouseout 事件触发后立即从画布中最后记录的鼠标位置画线到画布外部。

您可以添加一个新的全局变量mousePosition 并将其初始化为{x:0,y:0}。每次mousemove 触发（无论何时调用addPointToCanvasVar），将e.clientX 和e.clientY 记录到您的mousePosition。然后当mouseout 触发时（无论何时调用clearPathIfMouseCursorLeavesCanvasFunc），将其余部分从mousePosition 绘制到当前e.clientX 和e.clientY 位置。这将完成画布边缘的线条。

【讨论】：