HTML Canvas使用mouseover事件制作线条

Question

I am trying to write a code using HTML canvas that will create a line beginning where a mousemove event occurs. The line has a defined direction and should continue extending until it is off the screen. The issue I am having is that every time I move the mouse a new line begins(this is good) but the previous line stops extending. I believe that the issue is because each new line is taking on a set of parameters with the same name as the previous line, however I am not certain that this is the issue, nor do I know how to fix it.

Here is a jsfiddle of my current code: https://jsfiddle.net/tdammon/bf8xdyzL/

I start be creating an object named mouse that takes an x and y parameter. The xbeg and ybeg will be the starting coordinates for my lines.

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

Next I create an animate function that continuously calls itself. I create a new line object which will take the xbeg and ybeg parameters for beginning points and xbeg+10 and ybeg+10 as ending point. The function then increments xbeg and ybeg . I would like this function to create new lines that do not stop extending whenever the mouse is moved.

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

I've added to your code an array for all your lines: let linesRy = []; and I've changed a bit your draw() function by adding this.endx++; this.endy++; this.endx++; this.endy++;

also I'm using your commented out c.clearRect(0, 0, innerWidth, innerHeight); since with every frame you redraw all the lines. I hope this is what you need.

 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

the variable c is taken local variable

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