没有画布的HTML线条画（只是JS） [英] HTML line drawing without canvas (just JS)

问题描述

从我读过的所有内容都可以看出，HTML5 canvas标签是最好用的，但我需要连接到页面上不在canvas标签中的东西的线，所以canvas对我来说并不好（需要/需要使用本地JS）。

我有书面（从我发现的东西）一个功能，做我所需要的，但问题是一旦出现线，页面的其他一切消失。

我发现每次我改变JavaScript中的风格外观但形状消失了。

删除document.write的结尾没有任何消息。
$ b

 函数绘制（ax，ay，bx，by）{
 var n，widthLine，i，x，y; 
 widthLine = 1;如果（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>）; 
 
 
 
  

解决方案

下面的函数获取行的坐标，然后绘制它。

p>它使用一个细长的div元素。计算旋转角度和长度。

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

<$ p $
{
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>
}

I am trying to use HTML and draw a line on a page.

From everything I have read suggests HTML5 canvas tag is the best to use, but I need the line to connect to something on the page which is not in a canvas tag so canvas is not good for me (want/need to use native JS).

I have written (from something I found) a function which does what i need but problem is once line appears, everything else of page dissappears.

I found that every time I change the style in JavaScript everthing but the shape dissappears.

Deleting "document.write" ends with nothing dissappearing.

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

解决方案

A quick fix.

The below function gets the coords of the line and then draws it.

It works by using a long and thin div element. The rotation angle and length are calculated.

Should work across all browsers (hopefully even 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>"
}

这篇关于没有画布的HTML线条画（只是JS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！