1

How to draw a pie canvas by set time in inputs H:M:S? I have fiddle, but it works on the percentage. Please help make animation process on set time values. Thanks.

        function animate(current) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
        context.stroke();
        curPerc++;
        if (curPerc < endPercent) {
            requestAnimationFrame(function () {
                animate(curPerc / 100)
            });
        }
    }
rd2d2
  • 125
  • 3

1 Answers1

0

First of all what you need to do is to check the total time of your values. Do this when pressing the start-button.

var hours = document.getElementById("hh").value;
var minutes = document.getElementById("mm").value;
var seconds = document.getElementById("ss").value;

var totalTime = 60*60*hours + 60*minutes + seconds;

The next step is to separate the growing of your pie to outside the drawing. Right now, you're using rAF, which means you'll update your pie whenever the browser is ready.

var degreesPerSecond = 360/totalTime;
var updateFrequency = 200; //milliseconds
var curDeg = 0; //Keeping track on the currect degree

function update() {
    curDeg +=  degreesPerSecond/1000*updateFrequency;
    curPerc = curDeg/360;
}

When pressing the start-button, you also start an interval.

var myInterval = setInterval(update,updateFrequenzy);

Check out this update of your fiddle

Niddro
  • 1,705
  • 2
  • 12
  • 24
  • Thank you very much! Can I ask you to help to make 2 more things - to put a pause and resume the animation. – rd2d2 Mar 11 '15 at 12:13
  • And the last two questions to you) 1. How to make an alert after the end of the animation? I try ad else to if (curPerc < endPercent) but alert activated before animation stop. 2. I've added more background on another gray circle, but I think what I'm doing wrong - adding it to the animation function. Could you please correct me .. http://jsfiddle.net/rd2d2/ktygveh4/5/ – rd2d2 Mar 11 '15 at 18:57
  • You were correct in putting the check as `else` to the `if (curPerc < endPercent)` but you needed to make a small change: `if (curPerc <= endPercent)`. There's absolutely nothing wrong with your background circle. http://jsfiddle.net/Niddro/ktygveh4/6/ – Niddro Mar 11 '15 at 19:11
  • You may suggest how to optimize this canvas circle for retina devices? – rd2d2 Mar 12 '15 at 20:12
  • Sorry, I don't know anything about that ;) I suggest starting a new question. – Niddro Mar 12 '15 at 20:30
  • Ok. Thanks! I created a new question here https://stackoverflow.com/questions/29027477/how-to-optimize-canvas-circle-for-retina-devices – rd2d2 Mar 13 '15 at 08:26
  • I try to do as advised here - https://stackoverflow.com/questions/28837326/javascript-fullscreen-rectangle-in-canvas-android-ios-web-app/28843722#28843722 But it is impossible, the circle is drawn with an offset, could you help me finish it? My last fiddle http://jsfiddle.net/rd2d2/ktygveh4/9/ – rd2d2 Mar 13 '15 at 13:30
  • I'm sorry, I don't understand what you're having problems with. If the answer to your last question didn't solve your problem, you should keep asking the ppl there for help, they have the knowledge. Have you tried adding `#timer { position: relative; left: 0; top: 0; }` to your CSS, like Ken said (I changed the position to relative)? – Niddro Mar 13 '15 at 16:22