Javascript 不带画布的HTML线条图（仅JS）

我正在尝试使用HTML并在页面上画一条线

从我所读到的所有内容来看，HTML5画布标签是最好的使用方式，但我需要一条线来连接页面上不在画布标签中的内容，因此画布对我来说并不好（想要/需要使用原生JS）

我已经写了（从我发现的东西）一个函数，它做我需要的事情，但问题是一旦行出现，页面的其他所有内容都消失了

我发现，每次我在JavaScript中更改样式时，除了形状之外，其他一切都消失了

删除“document.write”结束时没有任何内容消失

函数图（ax、ay、bx、by）{
变量n，宽度线，i，x，y；
宽度线=1；
if（数学abs（ax-bx）>数学abs（ay-by））{
如果（ax>bx）{
n=ax；
ax=bx；
bx=n；
n=ay；
ay=通过；
by=n；
}
n=（by-ay）/（bx-ax）；
for（i=ax；i by）{
n=ax；
ax=bx；
bx=n；
n=ay；
ay=通过；
by=n；
}
n=（bx-ax）/（by-ay）；
对于（i=ay；i快速修复

下面的函数获取线的坐标，然后绘制线

它使用长而薄的div元素工作。计算旋转角度和长度

应该适用于所有浏览器（希望是IE）

功能线条绘制（ax、ay、bx、by）
{
如果（ay>by）
{
bx=ax+bx；
ax=bx-ax；
bx=bx-ax；
by=ay+by；
ay=按ay；
by=by-ay；
}
var calc=数学atan（（ay by）/（bx ax））；
calc=calc*180/Math.PI；
变量长度=数学sqrt（（ax bx）*（ax bx）+（ay by）*（ay by））；
document.body.innerHTML+=“”
}
这似乎非常适合您想要实现的目标。
另一个堆栈溢出页面上的这个答案效果很好。我正在绘制一个图像。我需要将图像放入一个DIV中，该DIV带有一个ID，该ID后来在getElementById（）调用的脚本中使用。然后它工作得很好。页面上的另一个答案（Craig Taub）不起作用。我这么说是因为我花了时间才意识到我没有做错什么。它使用了相同的原理，绘制一个旋转的薄div。我知道它在chrome中工作

我刚刚开发了我的版本，用纯js+html代码画一条线。

首先，tan函数定义在0到180度之间。如果x2大于x1，我们反转这些点（x2变成x1，x1变成x2）。

然后，我们检查这条线的长度（毕达哥拉斯定理）并测量斜率。利用斜率，我们可以计算以弧度表示的度数。要转换为度数，我们将结果乘以3.14。

最后我们可以画一个高度为1px，宽度为lineLength的div，我们根据计算的div旋转这个div

function linedraw(x1, y1, x2, y2) {
    if (x2 < x1) {
        var tmp;
        tmp = x2 ; x2 = x1 ; x1 = tmp;
        tmp = y2 ; y2 = y1 ; y1 = tmp;
    }

    var lineLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    var m = (y2 - y1) / (x2 - x1);

    var degree = Math.atan(m) * 180 / Math.PI;

    document.body.innerHTML += "<div class='line' style='transform-origin: top left; transform: rotate(" + degree + "deg); width: " + lineLength + "px; height: 1px; background: black; position: absolute; top: " + y1 + "px; left: " + x1 + "px;'></div>";
}

功能线条绘制（x1、y1、x2、y2）{
if（x2
更新为：

lineDraw(ax, ay, bx, by) {
    if(ax > bx) {
        bx = ax + bx; 
        ax = bx - ax;
        bx = bx - ax;

        by = ay + by;
        ay = by - ay;
        by = by - ay;
    }

    let distance = Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2));
    let calc = Math.atan((by - ay) / (bx - ax));
    let degree = calc * 180 / Math.PI;

    let line = document.createElement('div');
    line.style.css({
        position: 'absolute',
        height: '1px',
        transformOrigin: 'top left',
        width: distance,
        top: ay + 'px',
        left: ax + 'px',
        transform: `rotate(${degree}deg)`,
        backgroundColor: 'back',
    });
    document.body.appendChild(line);
}

调用您的方法两次将导致两个div具有相同的id。一个问题是，如果您尝试创建从左下到右上的行，它将生成错误的行。是的，我会将id更改为class。如果您也需要id，您可以在运行时轻松地为其提供由时间戳或其他任何内容生成的动态id你可能想通过识别它。Id应该是唯一的。不适用于我，而下面的答案（inteblio） worked@CraigTaub：它不能正常工作。这条线的终点是在当前鼠标位置上方画的。你能展示一个工作的小提琴吗？你能解释一下你是如何做到这一点的吗？我认为我看不出这是正确的。我添加了一个JSFIDLE来测试这一点，我认为这条线的坐标没有被改变正确的解决了（抱歉，我的数学不够好，无法解决问题）。请看一看，我正在尝试用纯js来解决这个问题（没有库）。我知道这并不总是最好的方法，特别是在HTML5中。这可能是一个更好的[工作]解决方案。请参阅
lineDraw(ax, ay, bx, by) {
    if(ax > bx) {
        bx = ax + bx; 
        ax = bx - ax;
        bx = bx - ax;

        by = ay + by;
        ay = by - ay;
        by = by - ay;
    }

    let distance = Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2));
    let calc = Math.atan((by - ay) / (bx - ax));
    let degree = calc * 180 / Math.PI;

    let line = document.createElement('div');
    line.style.css({
        position: 'absolute',
        height: '1px',
        transformOrigin: 'top left',
        width: distance,
        top: ay + 'px',
        left: ax + 'px',
        transform: `rotate(${degree}deg)`,
        backgroundColor: 'back',
    });
    document.body.appendChild(line);
}