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

Question

你能帮我弄清楚如何计算以下js脚本来显示总计的提醒金额（而不是百分比）吗？例如，如果 total(given) 是 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>

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

HTML 5 Draw Arc Based On Given Time

javascript

html5-canvas