如何用canvas画一个漂亮的箭头，此需求源于公司产品的强迫症，网上一大堆的箭头嫌丑，因此按照产品的要求，画出一个相对漂亮的箭头，当然正是因为产品精益求精的精神，才能做出更好产品。直接上图：
需求分析：
1、箭头可变大变小，且有最大值
2、箭头可以设置填充色，边框色
3、箭头起点，终点具有随机性
其实画箭的原理就是画射线，难点在于获取射线的各个点：
实现方案：
用canvas画射线从O点开始再到O点结束，中途经过 O=>C=>B=>A=>D=>F=>O
当然如果对canvas不熟悉的同学，请看canvas菜鸟教程，以下代码直接提供画箭头方法； 话不多说，直接上代码：
/**
*
* @param {*canvas context 对象} ctx
* @param {*起点横坐标} fromX
* @param {*起点纵坐标} fromY
* @param {*终点横坐标} toX
* @param {*终点纵坐标} toY
* 以下注释以终点在坐标第一象限内，且方向为右上方
*/
drawLineArrow(ctx,fromX,fromY, toX, toY) {
var headlen = 0.2 * 1.41 * Math.sqrt((fromX - toX) * (fromX - toX) + (fromY - toY) * (fromY - toY));//箭头头部长度
headlen = headlen > 40 ? 40 : headlen;//40是箭头头部最大值
var theta = 30;//自定义箭头线与直线的夹角
var arrowX, arrowY;//箭头线终点坐标
// 计算各角度和对应的箭头终点坐标
var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI;
var angle1 = (angle + theta) * Math.PI / 180;
var angle2 = (angle - theta) * Math.PI / 180;
var topX = headlen * Math.cos(angle1);
var topY = headlen * Math.sin(angle1);
var botX = headlen * Math.cos(angle2);
var botY = headlen * Math.sin(angle2);
var toLeft = fromX > toX;
var toUp = fromY > toY;
//箭头最上点
arrowX = toX + topX;
arrowY = toY + topY;
//箭头下拐点
var arrowX1 = toX + botX;
var arrowY1 = toY + botY;
//箭头上拐点
var arrowX2 = toUp ? arrowX + 0.25 * Math.abs(arrowX1 - arrowX) : arrowX - 0.25 * Math.abs(arrowX1 - arrowX);
var arrowY2 = toLeft ? arrowY - 0.25 * Math.abs(arrowY1 - arrowY) : arrowY + 0.25 * Math.abs(arrowY1 - arrowY);
//箭头最下点
var arrowX3 = toUp ? arrowX + 0.75 * Math.abs(arrowX1 - arrowX) : arrowX - 0.75 * Math.abs(arrowX1 - arrowX);
var arrowY3 = toLeft ? arrowY - 0.75 * Math.abs(arrowY1 - arrowY) : arrowY + 0.75 * Math.abs(arrowY1 - arrowY);
ctx.beginPath();
//起点-起点，闭合
ctx.moveTo(fromX, fromY);
ctx.lineTo(arrowX2, arrowY2);
ctx.lineTo(arrowX, arrowY);
ctx.lineTo(toX, toY);
ctx.lineTo(arrowX1, arrowY1);
ctx.lineTo(arrowX3, arrowY3);
ctx.lineTo(fromX, fromY);
ctx.closePath();
ctx.strokeStyle = "#FB8978";
ctx.fillStyle = "rgba(255,197,179,0.3)";
ctx.fill();
ctx.stroke();
}
体验传送门：
https://www.yozocloud.cn/preview.html?linkshared=ZmlsZUlkJTNENjEyNzM2MTUyMjI1ODg1OCUyNnZlcnNpb24lM0QtMSUyNnRyYXNoJTNEZmFsc2UlMjZtZXRob2QlM0QzJTI2dXVpZCUzREI0bkxsOGQ1
体验步骤：
1、点击链接，如果已登录，直接跳到第三步
2、如果未登录，输入账号密码登录，如果未注册先注册下
3、点击中间底部工具栏的箭头，然后在文档上按下鼠标左键拖拽，松下鼠标，即完成箭头绘制
4、画完箭头，弹出批注弹窗，输入完批注文案
批注介绍：
批注两种方式，一种点状批注，一种箭头批注，漂亮的箭头就是用于这里的场景。画完箭头，弹出批注弹窗，输入完批注文案，文案显示于右侧列表中，点击批注，右侧批注列表滚动到相应位置并高亮，点击右侧列表，左侧内容滚动到相应的批注并高亮。
