canvas 实现箭头上面有百分比

<canvas class="myCanvas" width="60" height="60" percent="90">

                            Your browser does not support the HTML5 canvas tag.

  </canvas>

为了清晰
.myCanvas{

    position: absolute;

    width: 30px;

}

this.drawLine('.myCanvas',8,20,50);

drawLine (selector,triangle,x,y) {

            let canvasArray = document.querySelectorAll(selector);

            canvasArray.forEach(element => {

                let ctx=element.getContext("2d");

                let data = element.getAttribute('data');

                ctx.beginPath();

                ctx.moveTo(triangle,0);

                ctx.lineTo(0,triangle);

                ctx.lineTo(triangle,triangle*2);

                ctx.strokeStyle = "#ccc";

                ctx.lineWidth = 2;

                ctx.stroke();

                ctx.beginPath();

                ctx.moveTo(0,triangle);

                ctx.lineTo(x,triangle);

                ctx.lineTo(x,y);

                ctx.lineTo(0,y);

                ctx.strokeStyle = "#ccc";

                ctx.lineWidth = 2;

                ctx.stroke();

                ctx.font = 'bold 20px Arial';

                ctx.fillStyle = data>100?'red':'green'; 

                ctx.fillText(data+"%",x/2-10,y/2+10);

            });

        }