HTML-чертеж без холста (только JS)

Я пытаюсь использовать HTML и нарисовать линию на странице.

Из всего, что я прочитал, можно предположить, что HTML5-тэг canvas лучше всего использовать, но мне нужна строка для соединения с чем-то на странице, которой нет в тэге canvas, так что canvas мне не подходит (хочу/нужно использовать нативный JS),

Я написал (из чего-то, что нашел) функцию, которая делает то, что мне нужно, но проблема в том, что после появления строки все остальное на странице исчезает.

Я обнаружил, что каждый раз, когда я меняю стиль в JavaScript, все, кроме формы, исчезает.

Удаление "document.write" заканчивается ничем не исчезающим.

function draw(ax, ay, bx, by) {
    var n, widthLine, i, x, y;
    widthLine = 1;
    if (Math.abs(ax - bx) > Math.abs(ay - by)) {
        if (ax > bx) {
            n = ax;
            ax = bx;
            bx = n;

            n = ay;
            ay = by;
            by = n;
        }
        n = (by - ay) / (bx - ax);

        for (i = ax; i <= bx; i++) {
            x = i;
            y = Math.round(ay + m * (x - ax));
            document.write("<div style='height:" + lineWidth + "px;width:" + widthLine + "px;background-color:black;position:absolute;top:" + y + "px;left:" + x + "px;'></div>");
        }
    } else {
        if (ay > by) {
            n = ax;
            ax = bx;
            bx = n;

            n = ay;
            ay = by;
            by = n;
        }
        n = (bx - ax) / (by - ay);

        for (i = ay; i <= by; i++) {
            y = i;
            x = Math.round(ax + n * (y - ay));
            document.write("<div style='height:" + lineWidth + "px;width:" + lineWidth + "px;background-color:black;position:absolute;top:" + y + "px;left:" + x + "px;'></div>");
        }
    }
}

Ответы

Ответ 1

Быстрое исправление.

Ниже функция получает координаты линии и затем рисует ее.

Он работает, используя длинный и тонкий элемент div. Рассчитаны угол и длина вращения.

Должен работать во всех браузерах (надеюсь, даже IE).

function linedraw(ax,ay,bx,by)
{
    if(ay>by)
    {
        bx=ax+bx;  
        ax=bx-ax;
        bx=bx-ax;
        by=ay+by;  
        ay=by-ay;  
        by=by-ay;
    }
    var calc=Math.atan((ay-by)/(bx-ax));
    calc=calc*180/Math.PI;
    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
    document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
}

Ответ 3

Этот ответ на другой странице работает хорошо. Я рисовал изображение. Мне нужно было поместить изображение в DIV с идентификатором, который позже использовался в script в вызове getElementById(). Тогда он отлично работает. Другой ответ на странице (Craig Taub) не работает. Я говорю это потому, что мне стоило времени осознать, что я ничего не делал. Он использует тот же принцип рисования тонкого div, который вращается. Я знаю, что он работает в хроме.

Рисование строк на странице html

Ответ 4

Я только что разработал свою версию рисования линии в чистом коде js + html.
Прежде всего, функция загара определяется между 0 и 180 градусами. Если x2 больше, чем x1, мы инвертируем эти точки (x2 становится x1, а x1 становится x2).
После этого мы проверяем длину этой линии (теорема Пифагора) и измеряем наклон. С наклоном мы можем рассчитать градусы в радиантах. Для преобразования в градусы мы умножаем результат и делим его на 3,14.
Наконец, мы можем нарисовать div с высотой 1px и шириной lineLength. Мы вращаем этот div на основе рассчитанного.

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

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

    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>"
}