why does canvas object keep blinking during animation? -
i made animation in javascript house rising smoke. smoke 3 functions each part of smoke flow upwards chimney. controlled slider toggles speed @ smoke exists chimney. works except when slider toggled left right, smoke blinks while rising. tell me why is?
thanks
html:
<!doctype html> <html> <head> <title>carrey, justin, myshkin, rost</title> <meta charset="utf-8"/> <link rel="stylesheet" href="style.css"/> </head> <body> <canvas id="canvas" width="500" height="500">get new browser!</canvas> <script src="script.js" ></script> <form> <input type="range" min="10" max="250" value="100" id="speedcont"/> <p> rostislav myshkin a00787633 rmyshkin@my.bcit.ca <br /> completed:3-d house, smoke, animation smoke, slider speed. <br /> challanges: animating smoke. </p> </form> </body> </html> javascript:
var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.linewidth = 4; ctx.strokelinecap = 'round'; var = 1; var speed = 100; var posy = 100, posy2 = 120, posy3 = 140, posx = 100, vx = 5, vy = 5; function foundation() { //grass ctx.fillstyle = "green"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(25, 375); ctx.lineto(125, 325); ctx.lineto(471, 325); ctx.lineto(400, 375); ctx.lineto(25, 375); ctx.fill(); ctx.stroke(); //front face ground ctx.fillstyle = "#873600"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(25, 375); //top left ctx.lineto(25, 425); //bottom left ctx.lineto(400, 425); //bottom right ctx.lineto(400, 375); //top right ctx.lineto(25, 375); //top line ctx.fill(); ctx.stroke(); //east face ground ctx.fillstyle = "#872000"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(475, 325); //top right ctx.lineto(475, 375); //bottom right ctx.lineto(400, 425); //bottom line ctx.lineto(400, 375); //top left ctx.lineto(475, 325); //top right ctx.fill(); ctx.stroke(); } function house() { //front face ctx.fillstyle = "#2980b9"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(110, 365); ctx.lineto(110, 200); ctx.lineto(375, 200); ctx.lineto(375, 365); ctx.lineto(110, 365); ctx.fill(); ctx.stroke(); //east face ctx.fillstyle = "#1760b4"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(375, 200); //lower left ctx.lineto(415, 180); // ctx.lineto(415, 340); ctx.lineto(375, 365); ctx.lineto(375, 200); ctx.fill(); ctx.stroke(); //roof front face ctx.fillstyle = "#b41717"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(95, 210); ctx.lineto(160, 140); ctx.lineto(395, 140); ctx.lineto(365, 210); ctx.lineto(365, 210); ctx.lineto(95, 210); ctx.fill(); ctx.stroke(); //roof east face ctx.fillstyle = "darkred"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(365, 210); ctx.lineto(425, 190); ctx.lineto(395, 140); ctx.lineto(365, 210); ctx.fill(); ctx.stroke(); //door ctx.fillstyle = "darkred"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(300, 365); ctx.lineto(300, 295); ctx.lineto(250, 295); ctx.lineto(250, 365); ctx.lineto(300, 365); ctx.fill(); ctx.stroke(); //doorknob ctx.fillstyle = "yellow"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.arc(290, 335, 5, 0, 2 * math.pi, false); ctx.fill(); ctx.stroke(); //walkway ctx.fillstyle = "gray"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(250, 365); //left point ctx.lineto(240, 375); //left side ctx.lineto(290, 375); ctx.lineto(300, 365); ctx.fill(); ctx.stroke(); //window living room ctx.fillstyle = "blue"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(143, 347); ctx.lineto(143, 295); ctx.lineto(212, 295); ctx.lineto(212, 347); ctx.lineto(143, 347); ctx.fill(); ctx.stroke(); //window top left ctx.fillstyle = "blue"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(143, 275); ctx.lineto(143, 225); ctx.lineto(212, 225); ctx.lineto(212, 275); ctx.lineto(143, 275); ctx.fill(); ctx.stroke(); //window top right ctx.fillstyle = "blue"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(263, 275); ctx.lineto(263, 225); ctx.lineto(332, 225); ctx.lineto(332, 275); ctx.lineto(263, 275); ctx.fill(); ctx.stroke(); //chimney front ctx.fillstyle = "black"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(170, 130); //top left ctx.lineto(170, 180); //left side line ctx.lineto(200, 180); //bottom line ctx.lineto(200, 130); //right side line ctx.lineto(170, 130); //top side line ctx.fill(); ctx.stroke(); //chimney east ctx.fillstyle = "black"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(200, 130); //top left ctx.lineto(215, 123); //top side line ctx.lineto(215, 170); //right side line ctx.lineto(200, 180); // ctx.fill(); ctx.stroke(); //chimney top ctx.fillstyle = "black"; ctx.strokestyle = "#000000"; ctx.beginpath(); ctx.moveto(170, 130); //top left ctx.lineto(185, 122); //left side ctx.lineto(210, 122); //top side ctx.lineto(200, 130); ctx.fill(); ctx.stroke(); } function smoke1(){ posy += -vy; posx += vx; if (posy < -15) posy = 100; ctx.fillstyle = "aqua"; ctx.fillrect(0,0, 220, 127); ctx.fillstyle = "rgba(0,0,0,0.5)"; ctx.beginpath(); ctx.arc(200, posy, 15, 0, math.pi*2, true); ctx.fill(); } function smoke2(){ posy2 += -vy; posx += vx; if (posy2 < -13) posy2 = 110; ctx.fillstyle = "rgba(0,0,0,0.5)"; ctx.beginpath(); ctx.arc(185, posy2, 10, 0, math.pi*2, true); ctx.fill(); } function smoke3(){ posy3 += -vy; posx += vx; if (posy3 < -13) posy3 = 110; ctx.fillstyle = "rgba(0,0,0,0.5s)"; ctx.beginpath(); ctx.arc(210, posy3, 6, 0, math.pi*2, true); ctx.fill(); } function animate() { smoke1(); var speed = document.getelementbyid('speedcont').value; window.settimeout(animate, speed); } function animate2() { smoke2(); var speed = document.getelementbyid('speedcont').value; window.settimeout(animate2, speed); } function animate3() { smoke3(); var speed = document.getelementbyid('speedcont').value; window.settimeout(animate3, speed); } /** if (a == 1) { ctx.clearrect(0, 0, 260, 105); smoke(); a++; } else if (a == 2) { ctx.clearrect(0, 0, 260, 105); smokemed(); a++; } else if (a == 3) { ctx.clearrect(0, 0, 260, 105); smokebig(); = 1; } else { ctx.clearrect(0, 0, 260, 105); } window.settimeout(animate2, speed); } **/ window.onload = function all() { foundation(); house(); animate(); animate2(); animate3(); } window.addeventlistener("load", all, false); //window.setinterval(animate2, 1000); //window.settimeout(animate2, speed); css:
#canvas { background-color: aqua; border: 1px solid black; margin-bottom: 10px ; } body { background-color: gray; } input[type=range] { -webkit-appearance: none; border: 3px solid black; width: 500px; border-radius: 20px; } input[type=range]::-webkit-slider-runnable-track { width: 500px; height: 10px; background: #ddd; border: none; border-radius: 20px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: 3px solid black; height: 30px; width: 30px; border-radius: 50%; background: red; margin-top: -8px; } input[type=range]:focus { outline: none; } input[type=range]:focus::-webkit-slider-runnable-track { background: #ccc; }
the flickr has having multiple settimeout functions. since delete previous state of smoke on smoke1(), once change speed there going discrepancy. if use 1 settimeout should work fine in particular case. here jsfiddle example.
Comments
Post a Comment