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

Question

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

这是我当前代码的 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

我已在您的代码中为您的所有行添加了一个数组：let linesRy = [];，并且通过添加 this.endx++; this.endy++; 对您的 draw() 函数进行了一些更改

我也在使用你注释掉的c.clearRect(0, 0, innerWidth, innerHeight);since ，每一帧你都重画了所有的线条。 我希望这是你需要的。

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>

Answer 2

变量c取局部变量

function animate() {
	c = canvas.getContext('2d');
    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;
}