HTML 5根据给定时间绘制弧线

Question

您能帮我弄清楚如何计算以下js脚本以显示总计提醒量（而不是百分比）吗？ 例如，如果总数（给定）为90 ， current也为90，则将绘制整个弧，如果当前量为45 ，则必须绘制弧的一半。

 var can = document.getElementById('canvas1'); var ctx = can.getContext("2d"); var context = can.getContext('2d'); var given; var current; var percentage = .5; var degrees = percentage * 360; var radians = degrees * (Math.PI / 180); var x = 50; var y = 50; var r = 30; var s = 1.5 * Math.PI; ctx.beginPath(); ctx.arc(50,50,30,0,2*Math.PI); ctx.fillStyle = "#FF0000"; ctx.fill(); ctx.stroke(); context.beginPath(); context.lineWidth = 10; context.arc(x, y, r, s, radians+s, false); context.stroke(); 

 <canvas id="canvas1" width="100" height="100"></canvas> 

Answer 1

您只需要更改var percentage 。 现在它可以正常工作，设置您的current设置，并given设置。

 var can = document.getElementById('canvas1'); var ctx = can.getContext("2d"); var context = can.getContext('2d'); var given = SET YOUR GIVEN VALUE; var current = SET YOUR CURRENT VALUE; var percentage = current/given; var degrees = percentage * 360; var radians = degrees * (Math.PI / 180); var x = 50; var y = 50; var r = 30; var s = 1.5 * Math.PI; ctx.beginPath(); ctx.arc(50,50,30,0,2*Math.PI); ctx.fillStyle = "#FF0000"; ctx.fill(); ctx.stroke(); context.beginPath(); context.lineWidth = 10; context.arc(x, y, r, s, radians+s, false); context.stroke(); 

 <canvas id="canvas1" width="100" height="100"></canvas>