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