Canvas painting arrow

// Draw the triangle arrow

    /** ** @param {*} CTX Canvas environment * @param {*} fromX starting point coordinates (can also change p1, It's just an array.) * @param {*} fromY * @param {*} toX * @param {*} toY * @param {*} Theta Hypotenuse Angle of a line * @param {*} headLen Hypotenuse length * @param {*} width Arrow line width * @param {*} color Arrow color */
    drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {
        var theta = theta || 30,
            headlen = headlen || 10,
            width = width || 1,
            color = color || '#2461EF',
            angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
            angle1 = (angle + theta) * Math.PI / 180,
            angle2 = (angle - theta) * Math.PI / 180,
            topX = headlen * Math.cos(angle1),
            topY = headlen * Math.sin(angle1),
            botX = headlen * Math.cos(angle2),
            botY = headlen * Math.sin(angle2);
        ctx.save();
        ctx.beginPath();
        var arrowX, arrowY;
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        arrowX = toX + topX;
        arrowY = toY + topY;
        ctx.moveTo(arrowX, arrowY);
        ctx.lineTo(toX, toY);
        arrowX = toX + botX;
        arrowY = toY + botY;
        ctx.lineTo(arrowX, arrowY);
        ctx.strokeStyle = color;
        ctx.lineWidth = width;
        ctx.stroke();
        ctx.restore();
    }Copy the code