Fatal编程技术网
  • javascript/
  • Javascript 在html页面上绘制线条

Javascript 在html页面上绘制线条

javascript html

Javascript 在html页面上绘制线条,javascript,html,Javascript,Html,如何在html页面中画一条线。我尝试使用画布，但发现它不起作用。也许浏览器不支持它。还有其他更简单的方法吗。对象是最简单的方法（除了扑通图像或使用flash）。另外，请发布您的代码，并告诉我们您正试图在哪个浏览器下使用。否则我们无法告诉你你做错了什么 就支持而言，维基百科： 目前最新版本的Mozilla Firefox、Google Chrome、Safari和Opera都支持该元素。从版本8[7]起，它不是由Internet Explorer（IE）本机实现的，尽管正在开发对Internet

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

对象是最简单的方法（除了扑通图像或使用flash）。另外，请发布您的代码，并告诉我们您正试图在哪个浏览器下使用
。否则我们无法告诉你你做错了什么

就支持而言，维基百科：

目前最新版本的Mozilla Firefox、Google Chrome、Safari和Opera都支持该元素。从版本8[7]起，它不是由Internet Explorer（IE）本机实现的，尽管正在开发对Internet Explorer 9的支持；但是，IE中可以支持Canvas元素的许多功能，例如使用Google或Mozilla插件、JavaScript库以及Adobe Flash或IE专有的VML

SVG是另一个选项，但是（令人惊讶的是！）IE不支持它（IE9应该支持它的某些部分）

我也不知道你想画什么样的线。我的意思是，你可以只做一个
div
并只启用它的一个边框，这将是一条直线。

并非所有浏览器都支持
元素。尝试跨浏览器解决方案，如或

另一种选择是使用SVG。

您可以定义：

<div id="line1" class="line vertical"></div>
<div id="line2" class="line horizontal"></div>

.line {
  position: absolute;
  background-color: #000000;
}

.vertical { 
   width: 1px;
   height: 500px;
}

.horizontal {
   width: 500px;
   height: 1px;
}

#line1 {
   top: 20px;
   left: 50%;
}

#line2 {
   top: 260px;
   left: 25%;
}

/* for added rotation effects */
.forty-five {
   transform: rotate(45deg);
}


.线路{
位置：绝对位置；
背景色：#000000；
}
.垂直{
宽度：1px；
高度：500px；
}
.水平{
宽度：500px；
高度：1px；
}
#第1行{
顶部：20px；
左：50%；
}
#第2行{
顶部：260px；
左：25%；
}
/*用于添加旋转效果*/
.四十五{
变换：旋转（45度）；
}
如果你想进入对角线，你可以开始
变换：旋转（45度），非常复杂。对不起，我不知道IE兼容的方式来轮换div，但这在Safari、Firefox、Chrome和Opera中都可以用

[编辑]

2014/11/08-sjc-更新的转换规则。添加了MozDev链接和IE旋转SO链接。
用于跨浏览器矢量图形的选项包括和编辑：可能有点晚了，但这是我的新实现。希望它更具可读性


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


解释（就像他们说的“一幅画抵得上千言万语”）：


嗨，我为这个提议制作了一个jQuery插件。它是交叉浏览器，不使用SVG或画布。检查它：
我发现
标签工作得很好，如果你想要的只是一条横穿页面的水平线。
我发现自己需要一个解决方案，所以我使用“hr”div和边框图像中的一些渐变来开发一个。下面是一个测试它和下面代码的示例


<html lang="fr">
<head>
<script>
    window.addEventListener("load",function(){
        function pow2(n){
            return n*n;
        }   

        var p1 = {
            id:"p1",
            x:150,
            y:50
        };
        var p2 = {
            id:"p2",
            x:300,
            y:250
        };
        var select = null;

        function getAngle(){

            var dist = Math.sqrt(pow2(p1.x-p2.x)+pow2(p1.y-p2.y));
            var l = document.getElementById("line");
            var cos = (p2.x-p1.x)/Math.sqrt(pow2(p2.x-p1.x)+pow2(p2.y-p1.y));
            var behind = p1.x < p2.x;
            var higher = p1.y > p2.y;
            l.style.width = (dist*2)+"px";
            l.style.left = (p1.x-dist)+"px";
            l.style.top = (p1.y)+"px";

            l.style.transform = "rotateZ("+(higher?-1:1)*Math.acos(cos)*(180/Math.PI)+"deg)";
        }

        var down = false

        document.addEventListener("mousemove",function(e){
            if(select){
                select.x = e.pageX;
                select.y = e.pageY;
                console.log(p1);
                var p = document.getElementById(select.id);
                p.style.left = (select.x-5)+"px";
                p.style.top = (select.y-5)+"px";
                getAngle();
            }
        });
        document.addEventListener("mouseup",function(e){
            if(!select)
                select = p1;
            else if(select == p1)
                select = p2;
            else 
                select = null;
        });
        document.addEventListener("mousedown",function(e){
            down = true;
        });
    });
</script>
</head>
<body>
<hr id="line" style="
position: absolute;
top: 50px;
left: -100px;
width: 500px;
margin: 0;
-webkit-transform: rotateZ(53.1deg);
border-width: 1px;      border-style: solid;                          
border-image: linear-gradient(to right, #ffffff 0%,#ffffff 49%,#000000 50%,#000000 100%) 1;
"/>
<div id="p1" style="
border-radius: 5px;
width: 10px;
background: #000;
position: absolute;
height: 10px;
top: 45px;
left: 145px;
"></div>
<div id="p2" style="
border-radius: 5px;
width: 10px;
background: #000;
position: absolute;
height: 10px;
top: 245px;
left: 295px;
"></div>
</body>
</html>




addEventListener（“加载”，函数（）{
功能pow2（n）{
返回n*n；
}   
变量p1={
id:“p1”，
x:150，
y:50
};
变量p2={
id:“p2”，
x:300，
y:250
};
var-select=null；
函数getAngle（）{
var dist=数学sqrt（pow2（p1.x-p2.x）+pow2（p1.y-p2.y））；
var l=document.getElementById（“行”）；
var cos=（p2.x-p1.x）/Math.sqrt（pow2（p2.x-p1.x）+pow2（p2.y-p1.y））；
后面的var=p1.xp2.y；
l、 style.width=（dist*2）+“px”；
l、 style.left=（p1.x-dist）+“px”；
l、 style.top=（p1.y）+“px”；
l、 style.transform=“rotateZ（“+（更高？-1:1）*Math.acos（cos）*（180/Math.PI）+”deg）”；
}
var down=false
文档.添加的事件列表器（“mousemove”，函数（e）{
如果（选择）{
选择.x=e.pageX；
选择.y=e.pageY；
控制台日志（p1）；
var p=document.getElementById（select.id）；
p、 style.left=（选择.x-5）+“px”；
p、 style.top=（选择.y-5）+“px”；
getAngle（）；
}
});
文件.附录列表器（“鼠标”，函数（e）{
如果（！选择）
选择=p1；
否则如果（选择==p1）
选择=p2；
其他的
select=null；
});
文件.添加的事件列表器（“鼠标向下”，函数（e）{
向下=真；
});
});





希望它能帮助别人：）
我在w3schools.com网站上找到了这段代码


这使您可以轻松地在画布上绘制线条。希望这有帮助
 使用HTML和CSS绘制简单的直线非常简单。你可以发布一些代码，或者你试图实现的目标的图像吗？@sam你最终实现了什么答案？此外，你可能不想绝对定位div。这取决于你如何使用该行。如果你只是做一个水平的规则，那么实际上也有一个标签
所有其他答案仅适用于垂直/水平线。这一条适用于任何度数的线条。^^^不准确。我确实喜欢这个答案，因为它是以编程方式实现的，但是它不是引用度的唯一答案。您可以通过CSS旋转基本上是短矩形和宽矩形的html div来实现度。@madox2，您能为代码添加注释以提高可读性并减轻用户对代码进行反向工程的负担吗？（特别是“if（y1var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();