[英]HTML 5 Draw Arc Based On Given Time
Can you please help me to figure out how to calculate following js script to display the reminding amount of total(instead of percentage)? 您能帮我弄清楚如何计算以下js脚本以显示总计提醒量(而不是百分比)吗? For example if the total(given) is 90 and also
current
is 90 then the whole arc will be drawn and if the current amount is 45
the half of the arc must be drawn. 例如,如果总数(给定)为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>
You just had to change the var percentage
. 您只需要更改
var percentage
。 Now it works, set your current
and given
as you please. 现在它可以正常工作,设置您的
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.