html画布跟随鼠标 [英] html canvas a line following mouse

问题描述

所以我想在鼠标后画一条线，然后单击以绘制该线，我需要用它来绘制多边形。我的想法是每次鼠标移动时都要画一条线，但是这会弄乱很多线条，所以我决定在鼠标移动时用白线画出旧的线条以进行清理，这样一来就只能画一条线从最后单击的点到当前的鼠标位置。为此，我的jsFiddle。但它没有以我想要的方式工作，是的，我在单击时绘制多边形，但是鼠标后没有线，所以我看不到我在画什么线。我看不出哪里有问题？也许有一些我找不到的现成解决方案？ Mycode：

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

    }

});`

推荐答案

最好的方法是使用一些动画。

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.

这篇关于html画布跟随鼠标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！