javascript - triangle animation issue canvas flip rotation -
hello wanted know if can provide tips or direction on issue i'm having triangle animation. have partial animation not continuous, jitters @ end of animation. i'm looking advise how make full rotation. if can assist in how add multiple rotations amazing.
thank ..
<!doctype html> <html> <head> <title>triangle animation team b</title> </head> <body> <canvas id="canvas" width="900" height="600"></canvas> <script> function maketriangle(x1,y1,x2,y2,x3,y3) { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext){ var ctx = canvas.getcontext('2d'); var array = ['red','green', 'black']; var color = array[math.floor(math.random() * 3)]; ctx.beginpath(); ctx.moveto(x1,y1); ctx.lineto(x2,y2); ctx.lineto(x3,y3); ctx.lineto(x1,y1); ctx.fillstyle = color; ctx.fill(); } } maketriangle('400','38','465','76','200','400'); var x = 200; window.setinterval( function() { var context = document.getelementbyid('canvas').getcontext('2d'); context.clearrect(0, 0, 1000, 500, 0); x++; if (x > 500) x = 300; maketriangle('400','38',x,'76','400','200'); }, 20); </script> </body> </html>
Comments
Post a Comment