Dessin de ligne HTML sans toile (juste JS)

J'essaie d'utiliser HTML et de tracer une ligne sur une page.

De tout ce que j'ai lu suggère HTML5, l'étiquette de toile est la meilleure à utiliser, mais j'ai besoin de la ligne pour me connecter à quelque chose sur la page qui n'est pas dans une étiquette de toile, donc la toile n'est pas bonne pour moi (besoin / besoin d'utiliser JS natif) .

J'ai écrit (à partir de quelque chose que j'ai trouvé) une fonction qui fait ce dont j'ai besoin mais le problème est qu'une fois que la ligne apparaît, tout le reste de la page disparaît.

J'ai trouvé que chaque fois que je change le style en JavaScript, tout sauf que la forme disparaît.

La suppression de "document.write" se termine sans que rien ne disparaisse.

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(xa + 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>"); } } }

Une solution rapide.

La fonction ci-dessous obtient les coordonnées de la ligne, puis la dessine.

Il fonctionne en utilisant un élément div et long et mince. L'angle de rotation et la longueur sont calculés.

Devrait fonctionner sur tous les navigateurs (espérons que même 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>" }

Cette bibliothèque graphique javascript semble très adaptée à ce que vous souhaitez atteindre.

Cette réponse sur une autre page de débordement de pile fonctionne bien. Je dessinais une image. Je devais mettre l'image dans un DIV avec une ID qui a été utilisée plus tard dans le script dans l'appel getElementById (). Ensuite, cela fonctionne très bien. L'autre réponse sur la page (Craig Taub) ne fonctionne pas. Je le dis parce que cela m'a coûté du temps pour se rendre compte que ce n'était rien que je me trompais. Il utilise le même principe de dessin d'un div divisé qui est tourné. Je sais que cela fonctionne en chrome.

Dessiner lignes sur la page html