Это не то. Здесь таймер подгоняется под progress bar, а мне нужно наоборот, чтобы прогресс бар двигался со скоростью временного интервала, чем больше времени установлено тем медленнее двигается progress bar..
Таймер это секунды. Когда я пытаюсь увеличить значение, допустим 300 секунд = 5минут, то вижу как цифра в fillText, начинает ускоряться.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<canvas id="myCanvas" ></canvas>
<script>
var myCanvas = document.getElementById("myCanvas"),
context = myCanvas.getContext("2d"),
timeLimit = 15E3,
timeStart = (new Date).getTime(),
canvasSize = 200,
lineWidth = 24,
drawX = drawY = radius = canvasSize / 2;
radius -= lineWidth / 2;
console.log(timeLimit);
myCanvas.width = canvasSize;
myCanvas.height = canvasSize;
sec1 = 300;
degrees = 2;
function go() {
context.beginPath();
context.lineWidth = lineWidth;
context.lineCap = "round";
context.strokeStyle = "rgb(0, 255, 0)";
var a = ((new Date).getTime() - timeStart) / timeLimit;
context.clearRect(0, 0, canvasSize, canvasSize);
context.font = '24px "Tahoma"';
context.fillText((sec1 - a*sec1)|0, radius, drawY);
context.arc(drawX, drawY, radius, -Math.PI / 2 + degrees * Math.PI * a, -Math.PI / 2, !1);
context.stroke();
1 < a && (timeStart = (new Date).getTime());
timer = window.setTimeout(go, 50)
}
go();
</script>
</body>
</html>