Как нарисовать стрелку в веб-браузере

Question

Учитывая две точки, (x, y) и (x1, y1), как мне нарисовать стрелку между этими точками в веб-браузере.Может ли jQuery или HTML5 это сделать?

Answer 1

Вам также понадобится небольшая тригонометрия средней школы, чтобы нарисовать стрелку.

var arrowHeadLength = 10; //whatever arbitrary value you want
// Line angle
var lineAngle = Math.atan ( (Y2-Y1)/(X2-X1) )
// Angle for arrow heads
var end1 = lineAngle + 45 * Math.PI/180
var end2 = lineAngle - 45 * Math.PI/180
// end points of arrow heads
var y3 = y2 - arrowHeadLength * Math.sin(end1)
var x3 = x2 - arrowHeadLength * Math.cos(end1)
var y4 = y2 - arrowHeadLength * Math.sin(end2)
var x4 = x2 - arrowHeadLength * Math.cos(end2)

Answer 2

HTML5 canvas тег.Посмотрите учебные пособия здесь ...

https://developer.mozilla.org/en/canvas_tutorial

Вот краткое демонстрационное руководство:

http://jsfiddle.net/wdm954/rueTn/1/

Answer 3

Вы можете сделать это в SVG, это должно работать в IE7, IE8, IE9, Chrome, Safari, Opera и Firefox

http://jsfiddle.net/thebeebs/g46Gz/

Answer 4

Код следующий

<canvas id="arrow" style="border:1px solid;background-color:#000000;" width="300" height="300">Your web browser does not supports HTML5!</canvas>

<script>
function drawArrow() {
 var canvas = document.getElementById('arrow');
 var context = canvas.getContext('2d');
 context.lineWidth = 3;
 context.lineJoin = 'round';
 context.strokeStyle = '#ffffff';
 context.save();
 context.beginPath();
 context.moveTo(43,150);
 context.lineTo(250,150);
 context.stroke();
 context.beginPath();
 context.moveTo(250,150);
 context.lineTo(200,80);
 context.stroke();
 context.beginPath();
 context.moveTo(250,150);
 context.lineTo(200,220);
 context.stroke();
}
window.addEventListener("load", drawArrow, true);
</script>

головка стрелки, однако, не закроется, если вы не продолжите рисовать линию от начала до конца. Образец резервной копии находится на этом посте http://gadgets -code.com / draw-arrow-on-html5-canvas

Answer 5

Вы можете сделать это довольно легко, используя элемент canvas с некоторым JavaScript.Ознакомьтесь с некоторыми основными функциями холста здесь .

В качестве примера (с существующим элементом canvas):

var context = document.getElementById('canvas').getContext('2d');
context.moveTo(0, 200);
context.lineTo(200, 0);
context.strokeStyle = '#000';
context.stroke();

Answer 6

Вам нужно будет использовать canvas или svg, вы можете использовать Google для библиотек, которые упрощают использование этих двух технологий.