使用线/线手动连接两个元素答案

【问题标题】：Connecting two elements using a line/wire manually使用线/线手动连接两个元素
【发布时间】：2017-12-18 07:29:05
【问题描述】：

我希望用户能够使用电线或线路连接一组点。 1、2和6点连接时连接完成，否则如果玩家连接错误，则屏幕显示错误连接。

【问题讨论】：

向我们展示您到目前为止所做的事情以及您遇到的问题。
我是一个初学者，但我可以给你一个 Flash 例子，比如想设计我的。 vem-iitg.vlabs.ac.in/…这样我也想在两点之间画一条线。
对于 Javascript，您必须使用 (html5) 画布。看：lineTo.
请注意，我们不是在这里为您创建和完成项目，我们在这里帮助您解决现有代码的问题。如果您希望我们能够帮助您，您需要向我们展示您在代码中所做的工作。
PS：如果您不使用 Adobe Flash 或 AS3 语言，请不要标记Flash。 “堆栈溢出”是代码中的崩溃，那么您自己的代码中存在什么问题？

标签： javascript html html5-canvas

【解决方案1】：

我可以给出一些以 . 开头的指针。

线条画

在选择节点时，您可以画线并放在其他节点上。继续捕获节点 ID，如果列表有 1、2、6，则说明其正确或错误

function drawLine(x, y) {
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(x, y);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
}

canvas.onmousedown = function (e)  {
    ctx.save();
    e.preventDefault();
    e.stopPropagation();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    isDown = true;
}
canvas.onmousemove = function (e)  {
    if (!isDown) {
        return;
    }
    e.preventDefault();
    e.stopPropagation();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    drawLine(mouseX, mouseY);
}
canvas.onmouseup = function (e)  {
    if (!isDown) {
        return;
    }
    e.preventDefault();
    e.stopPropagation();
    isDown = false;
}

【讨论】：