Güß Euch miteinander,
ich möchte eine Progressbar haben, die eine verbleibende Zeit anzeigt.
Ich habe eine kleine Funktion, die das im Prinzip macht. Sie ist aber ungenau mit der Zeit.
Ich möchte, dass in möglichst vielen Schritten (iz=10 gesetzt,Fließeffekt) in diesem Beispiel das ausgefüllte Rechteck von 200 px Länge in 4 Sekunden auf 0 zurückgesetzt wird.
Das Ergebnis ist ungenau. Liegt es an meinem Ansatz oder habe ich bei der Berechnung des Rest Rechtecks einen Fehler
GzG
Joachim
ich möchte eine Progressbar haben, die eine verbleibende Zeit anzeigt.
Ich habe eine kleine Funktion, die das im Prinzip macht. Sie ist aber ungenau mit der Zeit.
Code:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="500" height="600"></canvas>
<script>
var canv = document.getElementById("canvas");
var ctx = canv.getContext("2d");
function progMinus(x,y,w,h,zeit,iz){
//x, y , w, h Eingangsgrößen für das Rechteck Progressbar
// zeit gibt an wieviel Sekunden die Progressbar aktiv ist
// iz Aufruf setInterval
var ist =w;
zeit=zeit*1000;
var progInterval = setInterval (function() {
ist=ist-(w/zeit)*iz;
ctx.fillStyle = "black";
ctx.clearRect(x,y,w,h);
ctx.strokeRect(x,y,w,h);
ctx.fillRect(x,y,ist,h);
if( ist<=0 ) clearInterval(progInterval);
}, iz);
}
progMinus(50,50,200,10,4,10);
</script>
</body>
</html>
Ich möchte, dass in möglichst vielen Schritten (iz=10 gesetzt,Fließeffekt) in diesem Beispiel das ausgefüllte Rechteck von 200 px Länge in 4 Sekunden auf 0 zurückgesetzt wird.
Das Ergebnis ist ungenau. Liegt es an meinem Ansatz oder habe ich bei der Berechnung des Rest Rechtecks einen Fehler
GzG
Joachim