标签：canvas y5 x2 箭头 var y2 绘制 Math x5
canvas中没有提供绘制箭头的函数，需要自己手动绘制，幸好箭头并不复杂，简单来说箭头由三条线段组成，如下图所示，线段AB、BC和BD，关键在于在给定端点A和B的坐标情况下，如何计算点C和D的坐标。
这里有两个思路可供参考，如下
思路一，利用线段
首先，在线段AB上确定一个点P，接着经过P点画一条直线与AB垂直，最后在直线P点两端确定C和D点。
确定P点坐标，利用三角形相似得，
计算得P的横坐标xp = xb - (xb-xa)*|BP|/|BA|，同样纵坐标yp = yb - (yb-ya)*|BP|/|BA|。
确定直线CD，直线CD垂直于AB，所以：CD斜率*AB斜率=-1，CD斜率k=(xa-xb) / (yb-ya)。
点p经过直线CD，将P点坐标带入斜截式直线方程y=kx+b，得b=yp - k*xp。
确定C点和D点，令线段|CP|的长度为d，根据距离公式计算C和D的坐标即可，但公式很复杂，没推导出来，所以换一个思路：在直线CD上确定一个Q点（Q点横坐标为xa），则C点的坐标与P点坐标计算类似。
此思路需要单独处理直线平行于坐标轴的情况，代码如下：
var x3 = 0, y3 = 0;
var x4 = 0, y4 = 0;
var d1 = 20; // BP的长度
var d3 = d1/2; // CP的长度
var d2 = Distance(x1, y1, x2, y2); // 求距离
var x5 = (x2 - d1 * (x2 - x1) / d2); // P点(x5,y5)
var y5 = (y2 - d1 * (y2 - y1) / d2);
if (x1 == x2) {
x3 = x5 - d3;
x4 = x5 + d3;
y3 = y5;
y4 = y5;
} else if (y1 == y2) {
x3 = x5;
x4 = x5;
y3 = y5 - d3;
y4 = y5 + d3;
} else {
var k = (x1 - x2) / (y2 - y1);
var b = y5 - k * x5;
var x6 = x1; // Q点(x6,y6)
var y6 = k * x6 + b;
var d4 = Distance(x5, y5, x6, y6);
x3 = (x5 - d3 * (x5 - x6) / d4);
y3 = (y5 - d3 * (y5 - y6) / d4);
x4 = (x5 + d3 * (x5 - x6) / d4);
y4 = (y5 + d3 * (y5 - y6) / d4);
}思路二，利用夹角
线段BC的长度记为L，即|BC|=|BD|=L，记∠ABD为θ，则点D的坐标计算如下：
同理，C的坐标xc = xb - L × cos(α-θ)，yc = yd - L × sin(α-θ)。
其中tan(α) = (yb - ya) / (xb - xa)，所以α = Math.atan((yb - ya) / (xb - xa))，由于分母有可能是0，所以改用Math.atan2(yb - ya, xb - xa)计算。atan传入一个参数，atan2传入2个参数：分子和分母。
代码如下：
var l = 20; //
var a = Math.atan2((y2 - y1), (x2 - x1));
var x3 = x2 - l * Math.cos(a + 30 * Math.PI/180); // θ=30
var y3 = y2 - l * Math.sin(a + 30 * Math.PI/180);
var x4 = x2 - l * Math.cos(a - 30 * Math.PI/180);
var y4 = y2 - l * Math.sin(a - 30 * Math.PI/180);最后绘图：
context_.beginPath();
context_.moveTo(x1, y1);
context_.lineTo(x2, y2);
context_.moveTo(x3, y3);
context_.lineTo(x2, y2);
context_.lineTo(x4, y4);
context_.lineWidth = 5;
context_.strokeStyle = "#000000";
context_.stroke();箭头如下：
错误绘图方式：
箭头顶端多一个歪斜的尖，不美观。
标签：canvas,y5,x2,箭头,var,y2,绘制,Math,x5 来源： https://blog.csdn.net/hbuxiaoshe/article/details/120106031
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。