<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);
});
}
