Как организовать паузу в выполнении кода?
Пытаюсь сделать простой таймер для обратного отсчета. Не могу разобраться с setTimeout(). Все равно цифры бегут со страшной скоростью.
var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); var canvasW=c.width; var canvasH=c.height; var starttimer=90; var color='blue'; //таймер var timer=function(x,y){ this.x=x; this.y=y; //рисование таймера this.draw=function(){ ctx.font="40px Times New Roman"; ctx.textAlign='center'; ctx.textBaseline="middle"; ctx.fillStyle=color; ctx.fillText(starttimer,this.x,this.y); ctx.strokeStyle=color; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(canvasW/2,canvasH/2,30,0,Math.PI*2,false); ctx.stroke(); //изменение таймера setTimeout(starttimer -=1,1000); }; }; //конец таймера var Timer=new timer(canvasW/2,canvasH/2); function animate(){ ctx.clearRect(0,0,canvasW,canvasH); ctx.fillStyle="black"; ctx.fillRect(0,0,c.width,c.height); ctx.fill(); Timer.draw(); requestAnimationFrame(animate); }; animate(); Как правильно сделать? Пробовал вместо Timeout setInterval - почти тоже самое, нет задержки.... |
canvas timer
Jimy,
делайте полноценный макет! а не кусок кода. <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <canvas id="canvas" width=300 height="300" ></canvas> <script> var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); var canvasW=c.width; var canvasH=c.height; var starttimer=90; var color='blue'; //таймер var timer=function(x,y){ this.x=x; this.y=y; this.t = performance.now(); //рисование таймера this.draw=function(txt){ ctx.font="40px Times New Roman"; ctx.textAlign='center'; ctx.textBaseline="middle"; ctx.fillStyle=color; ctx.fillText(txt,this.x,this.y); ctx.strokeStyle=color; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(canvasW/2,canvasH/2,30,0,Math.PI*2,false); ctx.stroke(); }; }; //конец таймера var Timer=new timer(canvasW/2,canvasH/2); function animate(b){ ctx.clearRect(0,0,canvasW,canvasH); ctx.fillStyle="black"; ctx.fillRect(0,0,c.width,c.height); ctx.fill(); var timer = starttimer - (b - Timer.t)/1000; timer = Math.max(0, timer|0); Timer.draw(timer); timer && requestAnimationFrame(animate); }; requestAnimationFrame(animate); </script> </body> </html> |
Большое спасибо!
|
Цитата:
рони, Jimy, а если разные таймеры? <canvas id="canvas" width=300 height="300"></canvas> <script> function Timer(canvas) { this.canvas = canvas; this.context = canvas.getContext("2d"); this.x = canvas.width / 2; this.y = canvas.height / 2; this.counter = 90; this.lastTime = performance.now(); this.animate(); } Timer.prototype.draw = function draw() { var color = "blue"; var ctx = this.context; ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); ctx.fillStyle = "black"; ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); ctx.fill(); ctx.font = "40px Times New Roman"; ctx.textAlign = 'center'; ctx.textBaseline = "middle"; ctx.fillStyle = color; ctx.fillText(this.counter, this.x, this.y); ctx.strokeStyle = color; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(this.canvas.width / 2, this.canvas.height / 2, 30, 0, Math.PI * 2, false); ctx.stroke(); }; Timer.prototype.animate = function animate(time) { requestAnimationFrame(this.animate.bind(this)); if(time - this.lastTime >= 1000 && this.counter > 0) { this.counter--; this.lastTime = time; if(this.counter === 0 && "counterendCallback" in this) requestAnimationFrame(this.counterendCallback.bind(this)); } this.draw(); }; var timer = new Timer(document.getElementById("canvas")); </script> |
Malleys,
this.counter а если не изменять этот параметр, чтоб можно было повторно использовать? |
рони, вы можете работать как с обычным объектом, никакой магии!
var timer2 = new Timer(document.getElementById("canvas-2")); timer2.counter = 10; timer2.counterendCallback = () => alert("Время истекло!"); |
Malleys,
и почему нет остановки animate после this.counter === 0? |
Цитата:
Timer.prototype.setTimer = function(value) { this.counter = value; this.initialCounter = value; }; |
Цитата:
|
Malleys,
не особо понимаю зачем нужен setTimer и безостановочная долбёжка animate когда эта функция работает в холостую. |
Часовой пояс GMT +3, время: 19:07. |