在html页面上画线

Question

我们如何在html页面中画一条线。我尝试使用画布，但发现它不起作用。可能浏览器不支持。有没有其他更简单的方法。

原文由 sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑：也许有点晚了，但这是我的新实现。希望它更具可读性。

 function createLineElement(x, y, length, angle) {
    var line = document.createElement("div");
    var styles = 'border: 1px solid black; '
               + 'width: ' + length + 'px; '
               + 'height: 0px; '
               + '-moz-transform: rotate(' + angle + 'rad); '
               + '-webkit-transform: rotate(' + angle + 'rad); '
               + '-o-transform: rotate(' + angle + 'rad); '
               + '-ms-transform: rotate(' + angle + 'rad); '
               + 'position: absolute; '
               + 'top: ' + y + 'px; '
               + 'left: ' + x + 'px; ';
    line.setAttribute('style', styles);
    return line;
}

function createLine(x1, y1, x2, y2) {
    var a = x1 - x2,
        b = y1 - y2,
        c = Math.sqrt(a * a + b * b);

    var sx = (x1 + x2) / 2,
        sy = (y1 + y2) / 2;

    var x = sx - c / 2,
        y = sy;

    var alpha = Math.PI - Math.atan2(-b, a);

    return createLineElement(x, y, c, alpha);
}

document.body.appendChild(createLine(100, 100, 200, 200));

解释（正如他们所说的“一张图片胜过一千个单词”）：

原文由 madox2 发布，翻译遵循 CC BY-SA 3.0 许可协议