jquery - 如何在网络浏览器上绘制箭头

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)