html canvas a line following mouse

问题:

So i want to make a line follow mouse and on click to draw that line, i need this for drawing polygons. My idea was to draw a line every time mouse moves but then it makes mess with a lot of lines, so i decided to draw over old lines after mouse moves with white lines to clean up and so that there would be only one line that goes from a point of last clicked spot to current mouse location.My jsFiddle for this. but it doesn't work the way i want yes i draws polygons on clicking but there is no line following the mouse so i can't see what line I'm drawing. I don't see where is it wrong ? Maybe there is some ready solution that i didn't find ? Mycode :

    var polygonX = [];
    var polygonY = [];
    var lineReady = 0;
    var whileLineX;
    var whiteLineY;

    $("#body").bind('mousemove', function (ev) {
        if (lineReady >= 2) {

        var context;
        //clear old lines
        if (whiteLineX !== null && whiteLineY !== null) {
            context = $("#canvas")[0].getContext('2d');
            context.moveTo(polygonX[lineReady - 1], polygonY[lineReady - 1]);
            context.lineTo(whiteLineX, whiteLineY);
            context.strokeStyle = '#ffffff';
            context.stroke();
        }
        //draw a new line
        context = $("#canvas")[0].getContext('2d');
        var offset = $('#body').offset();
        var x = ev.clientX - offset.left;
        var y = ev.clientY - offset.top;

        context.beginPath();
        context.moveTo(polygonX[lineReady - 1], polygonY[lineReady - 1]);
        context.strokeStyle = '#000000';
        context.lineTo(x, y);
        context.stroke();

        whileLineX = x;
        whiteLineY = y;

    }
});


    $("#body").bind('click', function (ev) {

        var offset = $('#body').offset();
        var x = ev.clientX - offset.left;
        var y = ev.clientY - offset.top;

        polygonX

.push(x);
    polygonY.push(y);

    lineReady++;
    if (lineReady >= 2) {

        var context = $("#canvas")[0].getContext('2d');

        context.beginPath();
        context.moveTo(polygonX[lineReady - 2], polygonY[lineReady - 2]);
        context.lineTo(polygonX[lineReady - 1], polygonY[lineReady - 1]);
        context.stroke();

    }

});`

回答1:

The best way to do this is to use a bit of animation.

Everytime you draw a line, push its coordinates (first point and last point) in an array. Then draw your array at every animation loop(check out this link which will explain you how to animate) . Then you'll want to draw a single line, say colored in red, from the last point of the last line of the array where you're pushing lines to your mouse position.

Doing it this way will allow you to have a red line following your mouse at all times, giving you a "preview" of a line.

Algo-wise it would look like:

var arrayOflines = [];

canvas.onclick -> 
     var coordinates = mouseposition()
     arrayOfLines.push(coordinates)

function mouseposition(){
   returns x and y of your mouse on the canvas
}

function draw(array){
    loop through array
    draw line from array[0] to array[1], then from array[1] to array[2] on canvas
}

function drawPreview(){
    draw line from last point of arrayOflines to mouseposition;
}

//so here we are:
function animationloop{

   erase your canvas

   draw(arrayOfLines);  //draw your array
   drawPreview(); //draw your 'preview' line

   requestAnimationFrame(animationloop); //animate 
}

Doing things this way will allow you to achieve a clean result.