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
Post a Comment