HTML Canvas создает линии с помощью события mouseover

Question

Я пытаюсь написать код, используя HTML-холст, который создаст строку, начинающуюся там, где происходит событие 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

Я добавил в ваш код массив для всех ваших строк: let linesRy = []; и немного изменил вашу функцию draw (), добавив this.endx++; this.endy++;

, также я использую ваши комментарииout c.clearRect(0, 0, innerWidth, innerHeight);, так как с каждым кадром вы перерисовываете все строки.Я надеюсь, что это то, что вам нужно.

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;
}