HTML 5基於給定時間繪製弧線

Question

你能幫我弄清楚如何計算下面的js腳本來顯示提示總量（而不是百分比）？ 例如，如果總數（給定）是而且current是那麼將繪製整個圓弧並且如果當前數量是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>