【发布时间】：2011-05-15 07:18:01
【问题描述】：
我们如何在 html 页面中画一条线。我尝试使用画布，但发现它不起作用。可能浏览器不支持。有没有其他更简单的方法。
【问题讨论】：
-
用 HTML 和 CSS 画一条简单的直线真的很简单。您可以发布一些代码或您想要实现的目标的图像吗？
-
@sam 你最终实现了什么答案？
标签： javascript html
【发布时间】：2011-05-15 07:18:01
【问题描述】：
也许这个包可以提供帮助。您指定要绘制的线的起点和终点。 https://www.npmjs.com/package/draw-line-connect
【讨论】：
我在 w3schools.com 上https://www.w3schools.com/tags/canvas_lineto.asp找到了这个代码
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
这使您可以轻松地在画布上绘制线条。希望这会有所帮助！
【讨论】：
-
您不能只从 W3Schools 复制代码。他们的代码不受知识共享许可。另请参阅我对 Meta 的回答：meta.stackexchange.com/a/141240/188419
-
因此不考虑你需要一个画布对象来使用上面的代码。
编辑：也许有点晚了，但这是我的新实现。希望它更具可读性。
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));
解释（正如他们所说的“一张图片胜过一千个单词”）：
【讨论】：
-
所有其他答案仅适用于垂直/水平线。这个适用于任何度数的线。
-
^^不准确。我确实喜欢这个答案，因为它以编程方式完成，但它不是参考学位的唯一答案。您可以通过 html div 的 CSS 旋转来确定度数，这些 div 本质上是短而宽的矩形。
-
@madox2，您能否将 cmets 添加到您的代码中以提高其可读性并减轻用户对您的代码进行逆向工程的负担？ （尤其是“if(y1
-
这是一个很好的代码，当添加 transform:rotate('+deg+'deg) 时，也适用于 IE11。
-
逆向工程的用途比简单地理解二进制代码要广泛得多。如果您愿意，可以对电视机进行逆向工程。这个评论线程有点迂腐了，不是吗？永远不会达成一致或赢家，只有两个人试图在互联网上拥有更大的球。让我们放下仇恨，来来回回，嗯，@John？
我发现自己需要一个解决方案，所以我使用“hr” div 和边框图像中的一些渐变开发了一个解决方案。这是一个Jsfiddle link 来测试它和下面的代码。
<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>
希望它可以帮助某人:)
【讨论】：
-
rotated
with DOMelem.style.transform =rotateZ(angle) 这是一个很好的解决方案，
你可以定义：
<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);
}
如果你想进入对角线，你可以开始try some rotation withtransform: rotate(45deg);The IE Compatible method of rotating objects is discussed thoroughly here，这非常复杂。 我不知道旋转 div 的 IE 兼容方式，抱歉。，但这适用于 Safari、Firefox、Chrome 和 Opera。
[编辑]
2014/11/08 - sjc - 更新了转换规则。添加了 MozDev 链接和 IE 旋转 SO 链接。
【讨论】：
-
另外，您可能不想绝对定位 div。这取决于你如何使用这条线。如果你只是在做一个水平规则，那么实际上也有一个标签......
如果你想要的只是横过页面的一条水平线，我发现 标签效果很好。
【讨论】：
您好，我为该提议制作了一个 jQuery 插件。它是跨浏览器，不使用 SVG 或 CANVAS。检查它：https://github.com/tbem/jquery.line
【讨论】：
并非所有浏览器都支持<canvas/> 元素。尝试跨浏览器解决方案，例如 FlashCanvas 或 excanvas。
另一种方法是使用 SVG。
【讨论】：
-
截至 2014 年 2 月，所有主流浏览器的当前版本现在都支持
<canvas>。见caniuse.com/canvas
<canvas> 对象是最简单的方法（除了弹出图像或使用闪光灯）。另外，请发布您的代码并告诉我们您尝试使用的浏览器<canvas>。否则我们无法告诉您您做错了什么。
就支持而言，来自维基百科：
最新版本的 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 并只启用它的一个边框 - 那将是一条直线。
【讨论】：