jquery - How to clear only the animated section of the canvas between loops -
the animation linked in jsfiddle should show ekg style machine, set of lines scrolling across screen, repeats on loop after reverting briefly blank screen.
it's modification of great html5 canvas clipping animation sample code (http://tajvirani.com/2012/03/30/html5-canvas-animating-a-clip-mask-path/)
first loop works charm there flickering artefacts on.
how 'revert' original (machine image blank, black screen) before each iteration?
i thought c1.clearrect(0, 0, 386, 380); - line 42 of jsfiddle - did that, no joy.
setinterval(animatemanaging,6000); function animatemanaging() { // grabs canvas element made above var ca1=document.getelementbyid("cvs3"); // defines 2d thing, standard making canvas var c1=ca1.getcontext("2d"); // creates image variable hold , preload our image (can't animations on image unless loaded) var img1 = document.createelement('img'); // loads image link img element created above img1.src = "http://s33.postimg.org/3pk551xcv/managing_values.png"; // creates first save event, gives base clear our clipping / mask since can't delete elements. c1.save(); // our function when image loads img1.onload = function () { // clear off canvas // first call our canvas drawing function, thing going work us. drawc1r(0); // function doing heavy lifting. reason doing function because // make animation have draw circle (or element) frame frame, manually time // intensive going create loop it. 'i' stands radius of our border // on time our radius going bigger , bigger. function drawc1r(i) { // creates save state. imagine save state array, when clear 1 pops last element in array off stack // when save, creates element @ top of stack. if cleared without making new ones, end nothing on our stage. c1.save(); // clears off stage, because our image has transparency, , restore() (the thing pops 1 off stack) // doesn't clear off images, , if stick image on stage on , over, transparency stack on top of each other , // isn't quite want. c1.clearrect(0, 0, 386, 380); // adds 1 interval count i++; // tells canvas going start creating item on stage - can line, rectangle or shape draw, whatever // after path added clip when called. can have 3 rectangles drawn , make clip. c1.beginpath(); // make clipping rectangle, using make grow on each interval c1.rect(0,0,i*13,380); // after defined, make clip area out of it. c1.clip(); // have clip added it, going add image clip area. c1.drawimage(img1, 0, 0); // pops 1 off stack gets rid of clip can enlarge , make again on next pass c1.restore(); // here final size of rectangle, want grow until hits 380 set timeout run function again // until size want. time in milliseconds pretty defines framerate if (i < 380) { settimeout(function () { drawc1r(i); }, 100); } } } }
biggest issue here calling animatemanaging every 6 seconds, creating many 'instances' of drawer draw @ same time , create flickering.
rather that, call animatemanaging once, , handle loop : want is, when right side reached, clear things , restart on left : remove clearrect , change last if :
if (i * movespeed < viewwidth) { // resume if right side not reach settimeout(function() { drawc1r(i); }, animinterval); } else { // clear , restart 0 when right side reached. settimeout(function() { c1.clearrect(0, 0, viewwidth, viewheight); drawc1r(0); }, animinterval); } besides that, added vars avoid hard coded constants ( movespeed, viewwidth, viewheight, animinterval), , set source of image after setting onload handler.
following fiddle should close needs :
Comments
Post a Comment