Я пытаюсь использовать 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>");
}
}
}