canvas画箭头封装，直接调用

H5新出新出的canvas可以说被好多公司使用，但是canvas没有一个合适的关于箭头的一个样式就很不好，下面封装了一个箭头的简单样式，可以直接拿到项目中使用：

drawArrow(ctx,xA,yA,xB,yB,l=5,θ=30) {
        let L = 5;
        let a = Math.atan2((yB - yA), (xB - xA));
        let xC = xB - L * Math.cos(a + θ * Math.PI/180); // θ=30
        let yC = yB - L * Math.sin(a + θ * Math.PI/180);
        let xD = xB - L * Math.cos(a - θ * Math.PI/180);
        let yD = yB - L * Math.sin(a - θ * Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(xA, yA);
        ctx.lineTo(xB, yB);
        ctx.moveTo(xC, yC);
        ctx.lineTo(xB, yB);
        ctx.lineTo(xD, yD);
        // ctx.lineWidth = 5;//箭头的粗细，可以根据需要自己选择
        ctx.strokeStyle = "#000000";
        ctx.stroke();
    },

解释一下传参，第一个参数是你定义的getContext('2d')的名称，也是2d画图的对象，第二和第三个参数是你箭头的末端，第四和第五个参数是箭头的部分，第六个参数是箭头两边线段的长度，第七个参数是箭头的角度如图所示：

传递对应的参数就可以在页面画出对应的剪头了