canvas - update animation based on time in javascript(independent of frames) -


i implementing simple animation using javascript in canvas.an image updates position based on time elapseddt between each frame. here code

var lasttime=0; var speed=100;  mysprite = function() {   this.pos=[0,0]; }  function spriteposition(dt) {   (i=0; < stuff.sprite.length;i++) {     stuff.sprite[i].pos[0] += speed*dt;       } }  function animate(){    var canvas=document.getelementbyid('mycan');   var context=canvas.getcontext('2d');    var = date.now();   var dt = (now - lasttime) / 1000.0;    //clear   context.clearrect(0, 0, canvas.width, canvas.height);     //update   spriteposition(dt);   updatesprite();    //render   background(canvas,context);   draw(context);    lasttime = now;    //request new frame   requestanimframe(function() {     animate();   }); }  window.onload=function(){   init();   animate(); } 

dt

values in range 0.3-0.5 line

stuff.sprite[i].pos[0] += speed*dt;## 

assigns position values 136849325664.90016. please help.

you initialize lasttime 0 - initial delta veeeeery long (as of today 45 years!). should make sure catch first run (compare 0? or initialize lasttime date.now()) , treat separately, possibly setting dt 0.


Comments

Popular posts from this blog

php - mySql Join with 4 tables -

css - Text drops down with smaller window -

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -