Question

鉴于两点，(x, y)和(x1, y1)，如何在这些点之间绘制一个箭头指向Web浏览器。 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

你需要使用canvas或svg，你可以谷歌搜索使这两种技术更容易使用的库。

Answer 4

使用canvas元素和一些JavaScript可以非常轻松地完成。查看一些基本的画布功能here。

作为示例（使用现有的canvas元素）：

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

Answer 5

代码如下

<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 6

你可以在SVG中做到这一点，这应该适用于IE7，IE8，IE9，chrome，safari，opera和firefox

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

如何在Web浏览器上绘制箭头

6 个答案: