我们如何在html页面中画一条线。我尝试使用画布，但发现它不起作用。可能浏览器不支持。有没有其他更简单的方法。
在html页面上画线
IT技术
javascript
html
2021-03-15 19:29:59
6个回答
编辑：也许有点晚了，但这是我的新实现。希望它更具可读性。
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));
解释（正如他们所说的“一张图片值一千字”）：
你可以定义：
<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);
}
如果你想进入对角线，你可以开始尝试使用 transform: rotate(45deg); 旋转对象的 IE 兼容方法进行一些旋转here彻底讨论，这是非常复杂的。我不知道旋转 div 的 IE 兼容方式，抱歉。, 但这适用于 Safari、Firefox、Chrome 和 Opera。
[编辑]
2014/11/08 - sjc - 更新转换规则。添加了 MozDev 链接和 IE 旋转 SO 链接。
我发现自己需要一个解决方案，所以我使用“hr”div和边框图像中的一些渐变开发了一个解决方案。这是一个用于测试它的Jsfiddle 链接和下面的代码。
<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>
希望它可以帮助某人:)
的<canvas>对象是（除了plopping图像或使用flash）的最简单的方法。另外，请发布您的代码并告诉我们您尝试使用的浏览器<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并且只启用它的一个边界——那将是一条直线。
并非所有浏览器都支持该<canvas/>元素。尝试跨浏览器解决方案，例如FlashCanvas或excanvas。
另一种方法是使用 SVG。
其它你可能感兴趣的问题