javascript - HTML Canvas 使用鼠标悬停事件制作线条

Question

我正在尝试使用 HTML Canvas 编写代码，该代码将创建一行，从发生 mousemove 事件的位置开始。该线具有明确的方向，并且应继续延伸，直到离开屏幕。我遇到的问题是，每次移动鼠标时，都会开始新的一行(这很好)，但前一行会停止延伸。我认为问题是因为每个新行都采用一组与前一行同名的参数，但是我不确定这就是问题，也不知道如何解决它。

这是我当前代码的jsfiddle:https://jsfiddle.net/tdammon/bf8xdyzL/

我开始创建一个名为 mouse 的对象，它带有 x 和 y 参数。 xbeg 和 ybeg 将是我的线条的起始坐标。

let canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height= window.innerHeight;

let c = canvas.getContext('2d');
let mouse ={
    x:undefined,
    y:undefined,
}

window.addEventListener("mousemove",function(event){
    mouse.x = event.x;
    mouse.y = event.y;
    xbeg = mouse.x;
    ybeg = mouse.y;
})

接下来，我创建一个连续调用自身的动画函数。我创建一个新的线对象，它将采用 xbeg 和 ybeg 参数作为起点，以及 xbeg+10 和 ybeg+10 作为终点。然后该函数递增 xbeg 和 ybeg。我希望这个函数能够创建新的线条，只要移动鼠标，这些线条就不会停止延伸。

function animate() {

    requestAnimationFrame(animate);

    new Line(xbeg,ybeg,xbeg+10,ybeg+10)

    c.beginPath();
    c.moveTo(xbeg,ybeg);

    c.lineTo(xbeg+10,ybeg+10);
    c.stroke();

    xbeg += 1;
    ybeg += 1;
}

Answer 1

我已经在您的代码中添加了所有行的数组:letlinesRy = [];并且我通过添加this.endx++对您的draw()函数做了一些更改; this.endy++;

我还使用了您注释掉的c.clearRect(0, 0, insideWidth, insideHeight);，因为您在每一帧中都会重新绘制所有线条。 我希望这就是您所需要的。

let linesRy = [];
let canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let c = canvas.getContext("2d");
let mouse = {
  x: undefined,
  y: undefined
};
let xbeg, ybeg;

window.addEventListener("mousemove", function(event) {
    mouse.x = event.x;
    mouse.y = event.y;
    xbeg = mouse.x;
    ybeg = mouse.y;
});

class Line {
  constructor(begx, begy, endx, endy, dx, dy, slope) {
    this.begx = begx;
    this.begy = begy;
    this.endx = endx;
    this.endy = endy;
    this.dx = endx - begx;
    this.dy = endy - begy;
    this.slope = dy / dx;
  }

  draw() {
    this.endx++;
    this.endy++;
    c.beginPath();
    c.moveTo(this.begx, this.begy);
    c.lineTo(this.endx, this.endy);
    c.stroke();
  }
}

//let xend = 420;
//let yend = 220;

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, innerWidth, innerHeight);

  linesRy.push(new Line(xbeg, ybeg, xbeg + 10, ybeg + 10, 10, 10, 1));

  linesRy.forEach(l => {
    l.draw();
  });
}

animate();

canvas{border:1px solid;}

<canvas></canvas>