Javascript 画布-如何在点击之间画线，并在“新建”上更改颜色；路线；

我有一个画布（见下图），一段时间以来，我一直试图在用户在画布内单击时绘制的圆圈之间画线

从照片中的示例可以看出，这也是我希望在画布中看到的：

用户单击蓝色-开始第一个蓝色点（x），继续沿网格在画布内单击，添加更多蓝色点（x），并在它们之间添加蓝色线。 （我也不知道如何画X而不是我目前使用的圆圈）

用户单击红色-开始第一个点红色（o），继续沿网格在画布内单击，添加更多红色（o），并在它们之间添加红线

用户单击“Sterge”-画布清除，网格保留

[] 到目前为止，我的代码是：

var needFirstPoint = true;
var lineTo = [{}];

function drawNextLine(ctx, x, y) {
    if (needFirstPoint) {
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x, y);
        needFirstPoint = false;

    }
    else {
        ctx.beginPath();
        ctx.lineTo(x, y);
        ctx.stroke();
    }
}

   $(document).ready(function () {
    var canvas = $('#myCanvas').get(0);
    if (!canvas.getContext) { return; }
    var ctx = canvas.getContext('2d');

    var drawGrid = function (w, h, id) {
        ctx.canvas.width = w;
        ctx.canvas.height = h;
        ctx.lineWidth = .1;

        for (x = 15; x <= w; x += 60) {
            ctx.moveTo(x, 0);
            ctx.lineTo(x, h);
            for (y = 20; y <= h; y += 20) {
                ctx.moveTo(0, y);
                ctx.lineTo(w, y);
            }
        }
        ctx.stroke();

    };

    drawGrid(450, 280, "myCanvas");

    var drawChart = function () {
        ctx.arc(lineTo[lineTo.length - 1].x, lineTo[lineTo.length - 1].y, 6, 0, Math.PI * 2, false)
        ctx.stroke();
    }

    drawChart();

    document.getElementById('move').addEventListener('click', function () {

        $('#myCanvas').on('click', function (e) {

            var offset = $(this).offset();
            var x = e.pageX - offset.left;
            var y = e.pageY - offset.top;
            ctx.strokeStyle = "red";
            drawNextLine(ctx, x, y);

            lineTo.push({ x: x, y: y });
            drawChart();

        });
    });

    document.getElementById('move1').addEventListener('click', function () {

        $('#myCanvas').on('click', function (e) {

            var offset = $(this).offset();
            var x = e.pageX - offset.left;
            var y = e.pageY - offset.top;
            ctx.strokeStyle = "blue";
            drawNextLine1(ctx, x, y);

            lineTo.push({ x: x, y: y });
            drawChart();

        });
    });

});

var needFirstPoint=true；
var lineTo=[{}]；
函数drawNextLine（ctx、x、y）{
如果（第一点）{
ctx.lineWidth=2；
ctx.beginPath（）；
ctx.moveTo（x，y）；
needFirstPoint=false；
}
否则{
ctx.beginPath（）；
ctx.lineTo（x，y）；
ctx.stroke（）；
}
}
$（文档）.ready（函数（）{
var canvas=$（'#myCanvas'）.get（0）；
如果（！canvas.getContext）{return；}
var ctx=canvas.getContext（'2d'）；
var drawGrid=函数（w、h、id）{
ctx.canvas.width=w；
ctx.canvas.height=h；
ctx.lineWidth=.1；
对于（x=15；x我们已经简化了您的代码。希望您不介意。接下来是我的代码。我希望这是您想要的


var lineTo=[]；
$（文档）.ready（函数（）{
var canvas=$（“#myCanvas”）.get（0）；
如果（！canvas.getContext）{
返回；
}
var ctx=canvas.getContext（“2d”）；
var drawGrid=函数（w、h、id）{
ctx.canvas.width=w；
ctx.canvas.height=h；
ctx.lineWidth=0.1；
ctx.beginPath（）；
对于（x=15；x感谢您的回答，不幸的是我无法测试它。将带着反馈回来，它似乎做到了这一点：）。谢谢。很抱歉耽搁了。我测试了你的代码，它比我的代码要好，但并不完全符合我的需要。用户必须能够使用两个按钮画两条线，比如说左键和右键。当用户第一次单击左键，然后在画布上单击时，它以X开头（不是圆），用户继续绘制直到网格结束，然后单击右侧。现在从用户第一次单击画布（选择右侧后）的任何位置开始，以一条全新的线（我猜是第一个点）和一个圆圈（如上所述）开始。行必须相互独立。我仍然没有弄明白。任何帮助都将非常感谢。我需要有两个按钮：左键和右键。当我单击左键时，右键路径停止，左键路径从一个独立点开始。我已更新了我的答案。代码完全不同。对于每个新路径，都需要一个新的arr一组点数。当您单击按钮
dreapta
时，将创建一个新数组，并将其推入主数组
ry
。当您单击按钮
sterge
时，最后一个数组中的最后一个点数将被删除。我希望这就是您需要的。天哪，您太棒了！非常感谢您。关于按钮混淆，我实际上需要3个buttons、Left、Right和Delete（在我上次的评论中，我没有删除其中一个）。因此，我现在唯一需要的是弄清楚如何将事件添加到Stanga（左）按钮，以便在单击该按钮时开始一个新路径（就像我现在单击Dreapta），但圆圈中没有X。