Как мы можем нарисовать строку на странице html. Я попытался использовать холст, но обнаружил, что он не работает. Возможно, браузер не поддерживает его. Может ли быть другой более простой способ.
Рисование строк на странице html
Ответ 1
EDIT: Может быть, это немного поздно, но вот моя новая реализация. Надеюсь, он станет более читаемым.
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));
Объяснение (как говорится, "изображение стоит тысячи слов" ):
Ответ 2
вы можете определить:
<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 метод вращающихся объектов подробно обсуждается здесь, что очень сложно. Я не знаю, как совместимый с IE способ повернуть divs, извините., но это будет работать в Safari, Firefox, Chrome и Opera.
[редактирует]
2014/11/08 - sjc - обновленные правила преобразования. Добавлены ссылки MozDev и ссылки на IE в IE.
Ответ 3
Объект <canvas> - это самый простой способ (кроме того, чтобы накладывать изображение или использовать вспышку). Кроме того, разместите свой код и сообщите нам, в каком браузере вы пытаетесь использовать <canvas>. Мы не можем сказать вам, что вы делаете неправильно.
Что касается поддержки, из Википедии:
В настоящее время этот элемент поддерживается новейшими версиями Mozilla Firefox, Google Chrome, Safari и Opera. Он не внедряется в Internet Explorer (IE) с версии 8 [7], хотя поддержка находится в разработке для Internet Explorer 9; однако многие функции элементов Canvas могут поддерживаться в IE, например, с помощью плагинов Google или Mozilla, библиотек JavaScript, а также Adobe Flash или проприетарного VML-приложения.
SVG - еще один вариант, но (неожиданно!) IE не поддерживает его (IE9 должен поддерживать некоторые его части).
Я также не уверен, какую линию вы хотите нарисовать. Я имею в виду, вы могли бы просто сделать div и включить только одну из своих границ - это была бы прямая линия.
Ответ 4
Не все браузеры поддерживают элемент <canvas/>. Попробуйте кросс-браузерное решение, например FlashCanvas или excanvas.
Альтернативой является использование SVG.
Ответ 5
Я нашел, что мне нужно решение, поэтому я разработал один, используя div "hr" и некоторый градиент в пограничном изображении. Ниже приведена ссылка 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>
надеюсь, что это кому-то поможет:)
Ответ 6
варианты для векторной графики в кросс-браузере включают Raphaël и svgweb
Ответ 7
Привет, я создал плагин jQuery для этого предложения. Это кроссбраузер и не использует SVG или CANVAS. Проверьте это: https://github.com/tbem/jquery.line
Ответ 8
Я обнаружил, что <hr> работает очень хорошо, если все, что вам нужно, это горизонтальная линия на странице.
Ответ 9
Я нашел этот код на 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();
это позволяет легко рисовать линии на холсте. Надеюсь, это поможет!