javascript - setInterval for input slider does not work properly -
my code house smoke coming out chimney. tthe smoke controlled setinterval function connects slider on html page suppose control speed @ smoke blows out when move slider, restarts smoke function.
how set slider control speed of smoke?
here code:
/* draws each floor of canvas. */ function drawfloor() { ctx.fillstyle = "white"; ctx.fillrect(0, 250, 500, 250); } /* draws front side of house. */ function drawfront() { ctx.fillstyle = "#91aeac"; ctx.beginpath(); ctx.moveto(275,256); //tip ctx.lineto(325,350); //mid-right ctx.lineto(319,400); //bot-right ctx.lineto(250,387); //bot-left ctx.lineto(230,325); //mid-left ctx.closepath(); ctx.fill(); } /* draws side of house. */ function drawside() { ctx.fillstyle = "#6f978f"; ctx.beginpath(); ctx.moveto(325,350); //top-left ctx.lineto(412,325); //top-right ctx.lineto(400,375); //bot-right ctx.lineto(319,400); //bot-left ctx.closepath(); ctx.fill(); } /* draws chimney of house. */ function drawchimney() { ctx.beginpath(); ctx.moveto(308,217); //top-left ctx.lineto(337,213); //top-right ctx.lineto(337,250); //bot-right ctx.lineto(312,250); //bot-left ctx.closepath(); ctx.fillstyle = "#8eb0af"; ctx.fill(); } /* draws roof of house. */ function drawroof() { ctx.fillstyle = "#8e2f35"; ctx.beginpath(); ctx.moveto(278,244); //top-left ctx.lineto(370,221); //top-right ctx.lineto(425,324); //bot-right ctx.lineto(334,350); //bot-left ctx.closepath(); ctx.fill(); // draw left line of roof @ ctx.linewidth=10; ctx.strokestyle = "#c55463"; ctx.beginpath(); ctx.moveto(275,250); //top ctx.lineto(220,336); //bot ctx.stroke(); // draw right line of roof @ ctx.linewidth=10; ctx.strokestyle = "#c55463"; ctx.beginpath(); ctx.moveto(275,245); //top ctx.lineto(330,352); //bot ctx.stroke(); } /* draws door of house. */ function drawdoor(){ // draws top of door ctx.beginpath(); ctx.arc(278, 351, 19, 0, math.pi*2, true); ctx.closepath(); ctx.fillstyle = "#c18459"; ctx.fill(); // draws bottom of door ctx.beginpath(); ctx.moveto(265,389); //bot-left ctx.lineto(258.5,349); //top-left ctx.lineto(297,350); //top-right ctx.lineto(295,395); //bot-right ctx.closepath(); ctx.fillstyle = "#c18459"; ctx.fill(); // draws door knob ctx.beginpath(); ctx.arc(288, 363, 4, 0, math.pi*2, true); ctx.closepath(); ctx.fillstyle = " #5f371f"; ctx.fill(); } /* draws window of house. */ function drawwindow() { ctx.save(); ctx.shadowcolor="white"; ctx.shadowblur = 20; ctx.beginpath(); ctx.moveto(275,277); //tip ctx.lineto(288,300); //right ctx.lineto(275,325); //bot ctx.lineto(260,301); //left ctx.closepath(); ctx.fillstyle = "#f9f2c5"; ctx.fill(); ctx.restore(); } /* draws christmas tree. */ function drawtree() { /* // tree top ctx.beginpath(); ctx.moveto(129,280); //tip ctx.lineto(179,415); //right ctx.lineto(90,419); //left ctx.closepath(); ctx.fillstyle = "#8e9d2a"; ctx.fill(); // tree trunk ctx.fillstyle = "#a7673b"; ctx.beginpath(); ctx.moveto(124,417); //top-left ctx.lineto(150,415); //top-right ctx.lineto(148,427); //bot-right ctx.lineto(128,428); //bot-left ctx.closepath(); ctx.fill(); */ // tree top 1 ctx.beginpath(); ctx.moveto(135,350); //tip ctx.lineto(179,415); //right ctx.lineto(90,419); //left ctx.closepath(); ctx.fillstyle = "#8e9d2a"; ctx.fill(); // tree top 2 ctx.beginpath(); ctx.moveto(135,320); //tip ctx.lineto(179,385); //right ctx.lineto(90,385); //left ctx.closepath(); ctx.fillstyle = "#8e9d2a"; ctx.fill(); // tree trunk ctx.fillstyle = "#a7673b"; ctx.beginpath(); ctx.moveto(124,417); //top-left ctx.lineto(150,415); //top-right ctx.lineto(148,427); //bot-right ctx.lineto(128,428); //bot-left ctx.closepath(); ctx.fill(); } /* draw candy cane. */ function drawcandy() { ctx.beginpath(); ctx.strokestyle = "#c72828"; ctx.beginpath(); ctx.linewidth=8; ctx.moveto(200,435); ctx.beziercurveto(205,405,220,420,220,460); ctx.stroke(); ctx.closepath(); } /* draws snowman in background. */ function drawsnowman() { // snowman body ctx.beginpath(); ctx.arc(80,250,20,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#d8d8d8"; ctx.fill(); // snowman head ctx.beginpath(); ctx.arc(80,222,13,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#d8d8d8"; ctx.fill(); // snowman hat ctx.beginpath(); ctx.strokestyle="#f06140"; ctx.rect(78,200,5,5); ctx.stroke(); ctx.strokestyle = "#ff4444"; ctx.beginpath(); ctx.linewidth=5; ctx.moveto(70,210); //top ctx.lineto(92,210); //bot ctx.stroke(); // snowman left eye ctx.beginpath(); ctx.arc(76,220,2,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#000000"; ctx.fill(); // snowman right eye ctx.beginpath(); ctx.arc(84,220,2,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#000000"; ctx.fill(); // snowman left hand ctx.strokestyle = "#854b24"; ctx.beginpath(); ctx.linewidth=3; ctx.moveto(45,235); //top ctx.lineto(62,243); //bot ctx.stroke(); // snowman right hand ctx.strokestyle = "#854b24"; ctx.beginpath(); ctx.linewidth=3; ctx.moveto(113,235); //top ctx.lineto(98,243); //bot ctx.stroke(); } /* draws falling snow. */ function drawsnow() { (var = 0; < 10; i++) { ctx.beginpath(); ctx.arc(math.floor(math.random()*(500)), math.floor(math.random()*(500)) , math.random() + 0.7, 0, 2*math.pi); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); } } /* draws stars in sky. */ function drawstars() { ctx.save(); ctx.shadowcolor="white"; ctx.shadowblur = 10; ctx.beginpath(); ctx.arc(55,115,1,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(90,90,0.5,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(100,30,1,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(120,48,0.4,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(133,100,0.8,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(150,80,1,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(224,155,0.5,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(250,50,1,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(290,100,0.5,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(400,100,1,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(430,111,1.2,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(444,48,0.5,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(450,155,0.6,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(480,120,0.6,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.restore(); } var canvas = document.getelementsbytagname("canvas")[0]; //get canvas dom object var ctx = canvas.getcontext("2d"); //get context /* create objects g make smoke. each object placed off screen, , shadows remain on screen. */ var = { //create object of smoke x:621, //x value y:250, //y value r:13 //radius } var b = { //create object b of smoke x:595, y:190, r:13 } var c = { //create object c of smoke x:605, y:180, r:13 } var d = { //create object d of smoke x:620, y:210, r:13 } var e = { //create object e of smoke x:610, y:170, r:10 } var f = { //create object f of smoke x:610, y:250, r:8 } var g = { //create object g of smoke x:650, y:200, r:8 } /* draws components on canvas. */ var redraw = function(){ // draw smoke ctx.save(); ctx.shadowcolor="#808080"; ctx.shadowblur = 40; ctx.shadowoffsetx = -300; ctx.clearrect(0, 0, canvas.width, canvas.height); //clear canvas ctx.beginpath(); //draw object c ctx.arc(a.x, a.y, a.r, 0, math.pi*2); ctx.fillstyle = "rgba(128, 128, 128, 0.4)"; ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object b ctx.arc(b.x, b.y, b.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object c ctx.arc(c.x, c.y, c.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object d ctx.arc(d.x, d.y, d.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object e ctx.arc(e.x, e.y, e.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object f ctx.arc(f.x, f.y, f.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object g ctx.arc(g.x, g.y, g.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.restore(); drawstars(); drawfloor(); drawfront(); drawside(); drawchimney(); drawroof(); drawdoor(); drawwindow(); drawtree(); drawsnowman(); drawsnow(); drawcandy(); requestanimationframe(redraw); } /* increases each smoke component in size , moves canvas. returns each 1 specified position , size after reaches specified point above canvas. */ function move(){ a.y -= 8; // move circle canvas a.r += 2; // increase circle in size if (a.y < -100) { // if circle reaches position, returns specified position // , size a.y = 195; // returns position a.r = 13; // returns size } b.y -= 8; b.r += 2; if (b.y < -200) { b.y = 195; b.r = 13; } c.y -= 8; c.r += 2; if (c.y < -300) { c.y = 195; c.r = 13; } d.y -= 8; d.r += 2; if (d.y < -250) { d.y = 195; d.r = 13; } e.y -= 8; e.r += 2; if (e.y < -200) { e.y = 195; e.r = 10; } f.y -= 8; f.r += 2; if (f.y < -220) { f.y = 200; f.r = 10; } g.y -= 8; g.r += 2; if (g.y < -250) { g.y = 195; g.r = 10; } } redraw(); setinterval(move, 100); // initial animation before slider used /* uses slider output determine how animate executed. reverses number when user positions slider right, code executed more (faster smoke); likewise, when positioned left, executed less (slower smoke). */ function outputupdate(counter) { var canvas = document.getelementsbytagname("canvas")[0]; //get canvas dom object var ctx = canvas.getcontext("2d"); //get context /* create objects g make smoke. each object placed off screen, , shadows remain on screen. */ var = { //create object of smoke x:621, //x value y:250, //y value r:13 //radius } var b = { //create object b of smoke x:595, y:190, r:13 } var c = { //create object c of smoke x:605, y:180, r:13 } var d = { //create object d of smoke x:620, y:210, r:13 } var e = { //create object e of smoke x:610, y:170, r:10 } var f = { //create object f of smoke x:610, y:250, r:8 } var g = { //create object g of smoke x:650, y:200, r:8 } /* draws components on canvas. */ var redraw = function(){ // draw smoke ctx.save(); ctx.shadowcolor="#808080"; ctx.shadowblur = 40; ctx.shadowoffsetx = -300; ctx.clearrect(0, 0, canvas.width, canvas.height); //clear canvas ctx.beginpath(); //draw object c ctx.arc(a.x, a.y, a.r, 0, math.pi*2); ctx.fillstyle = "rgba(128, 128, 128, 0.4)"; ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object b ctx.arc(b.x, b.y, b.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object c ctx.arc(c.x, c.y, c.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object d ctx.arc(d.x, d.y, d.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object e ctx.arc(e.x, e.y, e.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object f ctx.arc(f.x, f.y, f.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object g ctx.arc(g.x, g.y, g.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.restore(); drawstars(); drawfloor(); drawfront(); drawside(); drawchimney(); drawroof(); drawdoor(); drawwindow(); drawtree(); drawsnowman(); drawsnow(); requestanimationframe(redraw); } /* increases each smoke component in size , moves canvas. returns each 1 specified position , size after reaches specified point above canvas. */ function move(){ a.y -= 8; // move circle canvas a.r += 2; // increase circle in size if (a.y < -100) { // if circle reaches position, returns specified position // , size a.y = 195; // returns position a.r = 13; // returns size } b.y -= 8; b.r += 2; if (b.y < -200) { b.y = 195; b.r = 13; } c.y -= 8; c.r += 2; if (c.y < -300) { c.y = 195; c.r = 13; } d.y -= 8; d.r += 2; if (d.y < -250) { d.y = 195; d.r = 13; } e.y -= 8; e.r += 2; if (e.y < -200) { e.y = 195; e.r = 10; } f.y -= 8; f.r += 2; if (f.y < -220) { f.y = 200; f.r = 10; } g.y -= 8; g.r += 2; if (g.y < -250) { g.y = 195; g.r = 10; } } redraw(); document.queryselector('#speed').value = counter; setinterval(function(){ move() }, (200-counter)); }body { padding-left: 2em; } canvas { border: 1px solid grey; background-color: #4a6485; display: block; } #fakelinks { position: relative; color: blue; font-family: arial; top: -10; left: -25; } span { color: black; } #icon { position: relative; top: 12; left: -5; } #setspeed { position: relative; top:0; left:180; right:0; bottom:1000; } #speed { color: white; } #info { position: relative; top:0; left:0; right:0; bottom:0; }<!-- stars or snow; separate function smoke - not work range?; stars behind smoke; rid of range # --> <html lang="en"> <head> <title>smoke</title> <div id="fakelinks"> <img id="icon" src="images/houseicon.png" alt="houseicon">vancouver, bc <span>></span> housing <span>></span> rent</div> <h2>get out of cold , stay @ our winter vacation rental!</h2> <div class="wrapper"> <canvas id="canvas" width="500" height="500"></canvas> <input id="setspeed" type="range" min="0" max="200" value="100" oninput="outputupdate(value)" name="sliderinput"/> <output for="setspeed" id="speed" name="slideroutput"></output> </div> <link rel="stylesheet" href="style/house.css"> </head> <!--commented out use in snippet <script src="house.js"></script> --> <body onload="drawsnow()"> <div id ="info"> <p>everything completed. have working fireplace , electricity.</p> <p>there no major challenges in construction of house.</p></br> <p>for more information please contact: </p> <p> </p> <p></p> </div> </body> </html>
in outputupdate() re-define huge number of variables, along move() , redraw() functions. difference in re-defined redraw() don't call drawcandy(). ridiculous way whatever trying redefining these. i'm not sure is. if wanting not call drawcandy() pass argument, or set global variable. don't duplicate code. duplicating code causing significant problems.
the problem having setinterval() not clearing interval prior setting new interval updates @ different rate. results in creating large number of interval timers bog down cpu. solve this, used brute force method of creating global variable moveintervalid store interval id, , called clearinterval() prior both setinterval() calls.
i moved drawing smoke own function.
var moveintervalid; /* draws each floor of canvas. */ function drawfloor() { ctx.fillstyle = "white"; ctx.fillrect(0, 250, 500, 250); } /* draws front side of house. */ function drawfront() { ctx.fillstyle = "#91aeac"; ctx.beginpath(); ctx.moveto(275,256); //tip ctx.lineto(325,350); //mid-right ctx.lineto(319,400); //bot-right ctx.lineto(250,387); //bot-left ctx.lineto(230,325); //mid-left ctx.closepath(); ctx.fill(); } /* draws side of house. */ function drawside() { ctx.fillstyle = "#6f978f"; ctx.beginpath(); ctx.moveto(325,350); //top-left ctx.lineto(412,325); //top-right ctx.lineto(400,375); //bot-right ctx.lineto(319,400); //bot-left ctx.closepath(); ctx.fill(); } /* draws chimney of house. */ function drawchimney() { ctx.beginpath(); ctx.moveto(308,217); //top-left ctx.lineto(337,213); //top-right ctx.lineto(337,250); //bot-right ctx.lineto(312,250); //bot-left ctx.closepath(); ctx.fillstyle = "#8eb0af"; ctx.fill(); } /* draws roof of house. */ function drawroof() { ctx.fillstyle = "#8e2f35"; ctx.beginpath(); ctx.moveto(278,244); //top-left ctx.lineto(370,221); //top-right ctx.lineto(425,324); //bot-right ctx.lineto(334,350); //bot-left ctx.closepath(); ctx.fill(); // draw left line of roof @ ctx.linewidth=10; ctx.strokestyle = "#c55463"; ctx.beginpath(); ctx.moveto(275,250); //top ctx.lineto(220,336); //bot ctx.stroke(); // draw right line of roof @ ctx.linewidth=10; ctx.strokestyle = "#c55463"; ctx.beginpath(); ctx.moveto(275,245); //top ctx.lineto(330,352); //bot ctx.stroke(); } /* draws door of house. */ function drawdoor(){ // draws top of door ctx.beginpath(); ctx.arc(278, 351, 19, 0, math.pi*2, true); ctx.closepath(); ctx.fillstyle = "#c18459"; ctx.fill(); // draws bottom of door ctx.beginpath(); ctx.moveto(265,389); //bot-left ctx.lineto(258.5,349); //top-left ctx.lineto(297,350); //top-right ctx.lineto(295,395); //bot-right ctx.closepath(); ctx.fillstyle = "#c18459"; ctx.fill(); // draws door knob ctx.beginpath(); ctx.arc(288, 363, 4, 0, math.pi*2, true); ctx.closepath(); ctx.fillstyle = " #5f371f"; ctx.fill(); } /* draws window of house. */ function drawwindow() { ctx.save(); ctx.shadowcolor="white"; ctx.shadowblur = 20; ctx.beginpath(); ctx.moveto(275,277); //tip ctx.lineto(288,300); //right ctx.lineto(275,325); //bot ctx.lineto(260,301); //left ctx.closepath(); ctx.fillstyle = "#f9f2c5"; ctx.fill(); ctx.restore(); } /* draws christmas tree. */ function drawtree() { /* // tree top ctx.beginpath(); ctx.moveto(129,280); //tip ctx.lineto(179,415); //right ctx.lineto(90,419); //left ctx.closepath(); ctx.fillstyle = "#8e9d2a"; ctx.fill(); // tree trunk ctx.fillstyle = "#a7673b"; ctx.beginpath(); ctx.moveto(124,417); //top-left ctx.lineto(150,415); //top-right ctx.lineto(148,427); //bot-right ctx.lineto(128,428); //bot-left ctx.closepath(); ctx.fill(); */ // tree top 1 ctx.beginpath(); ctx.moveto(135,350); //tip ctx.lineto(179,415); //right ctx.lineto(90,419); //left ctx.closepath(); ctx.fillstyle = "#8e9d2a"; ctx.fill(); // tree top 2 ctx.beginpath(); ctx.moveto(135,320); //tip ctx.lineto(179,385); //right ctx.lineto(90,385); //left ctx.closepath(); ctx.fillstyle = "#8e9d2a"; ctx.fill(); // tree trunk ctx.fillstyle = "#a7673b"; ctx.beginpath(); ctx.moveto(124,417); //top-left ctx.lineto(150,415); //top-right ctx.lineto(148,427); //bot-right ctx.lineto(128,428); //bot-left ctx.closepath(); ctx.fill(); } /* draw candy cane. */ function drawcandy() { ctx.beginpath(); ctx.strokestyle = "#c72828"; ctx.beginpath(); ctx.linewidth=8; ctx.moveto(200,435); ctx.beziercurveto(205,405,220,420,220,460); ctx.stroke(); ctx.closepath(); } /* draws snowman in background. */ function drawsnowman() { // snowman body ctx.beginpath(); ctx.arc(80,250,20,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#d8d8d8"; ctx.fill(); // snowman head ctx.beginpath(); ctx.arc(80,222,13,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#d8d8d8"; ctx.fill(); // snowman hat ctx.beginpath(); ctx.strokestyle="#f06140"; ctx.rect(78,200,5,5); ctx.stroke(); ctx.strokestyle = "#ff4444"; ctx.beginpath(); ctx.linewidth=5; ctx.moveto(70,210); //top ctx.lineto(92,210); //bot ctx.stroke(); // snowman left eye ctx.beginpath(); ctx.arc(76,220,2,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#000000"; ctx.fill(); // snowman right eye ctx.beginpath(); ctx.arc(84,220,2,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#000000"; ctx.fill(); // snowman left hand ctx.strokestyle = "#854b24"; ctx.beginpath(); ctx.linewidth=3; ctx.moveto(45,235); //top ctx.lineto(62,243); //bot ctx.stroke(); // snowman right hand ctx.strokestyle = "#854b24"; ctx.beginpath(); ctx.linewidth=3; ctx.moveto(113,235); //top ctx.lineto(98,243); //bot ctx.stroke(); } /* draws falling snow. */ function drawsnow() { (var = 0; < 10; i++) { ctx.beginpath(); ctx.arc(math.floor(math.random()*(500)), math.floor(math.random()*(500)) , math.random() + 0.7, 0, 2*math.pi); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); } } /* draw smoke */ function drawsmoke() { // draw smoke ctx.save(); ctx.shadowcolor="#808080"; ctx.shadowblur = 40; ctx.shadowoffsetx = -300; ctx.clearrect(0, 0, canvas.width, canvas.height); //clear canvas ctx.beginpath(); //draw object c ctx.arc(a.x, a.y, a.r, 0, math.pi*2); ctx.fillstyle = "rgba(128, 128, 128, 0.4)"; ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object b ctx.arc(b.x, b.y, b.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object c ctx.arc(c.x, c.y, c.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object d ctx.arc(d.x, d.y, d.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object e ctx.arc(e.x, e.y, e.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object f ctx.arc(f.x, f.y, f.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.beginpath(); //draw object g ctx.arc(g.x, g.y, g.r, 0, math.pi*2); ctx.closepath(); ctx.fill(); ctx.restore(); } /* draws stars in sky. */ function drawstars() { ctx.save(); ctx.shadowcolor="white"; ctx.shadowblur = 10; ctx.beginpath(); ctx.arc(55,115,1,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(90,90,0.5,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(100,30,1,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(120,48,0.4,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(133,100,0.8,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(150,80,1,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(224,155,0.5,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(250,50,1,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(290,100,0.5,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(400,100,1,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(430,111,1.2,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(444,48,0.5,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(450,155,0.6,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.beginpath(); ctx.arc(480,120,0.6,0,math.pi*2,true); ctx.closepath(); ctx.fillstyle = "#ffffff"; ctx.fill(); ctx.restore(); } var canvas = document.getelementsbytagname("canvas")[0]; //get canvas dom object var ctx = canvas.getcontext("2d"); //get context /* create objects g make smoke. each object placed off screen, , shadows remain on screen. */ var = { //create object of smoke x:621, //x value y:250, //y value r:13 //radius } var b = { //create object b of smoke x:595, y:190, r:13 } var c = { //create object c of smoke x:605, y:180, r:13 } var d = { //create object d of smoke x:620, y:210, r:13 } var e = { //create object e of smoke x:610, y:170, r:10 } var f = { //create object f of smoke x:610, y:250, r:8 } var g = { //create object g of smoke x:650, y:200, r:8 } /* draws components on canvas. */ function redraw(){ drawsmoke(); drawstars(); drawfloor(); drawfront(); drawside(); drawchimney(); drawroof(); drawdoor(); drawwindow(); drawtree(); drawsnowman(); drawsnow(); drawcandy(); requestanimationframe(redraw); } /* increases each smoke component in size , moves canvas. returns each 1 specified position , size after reaches specified point above canvas. */ function move(){ a.y -= 8; // move circle canvas a.r += 2; // increase circle in size if (a.y < -100) { // if circle reaches position, returns specified position // , size a.y = 195; // returns position a.r = 13; // returns size } b.y -= 8; b.r += 2; if (b.y < -200) { b.y = 195; b.r = 13; } c.y -= 8; c.r += 2; if (c.y < -300) { c.y = 195; c.r = 13; } d.y -= 8; d.r += 2; if (d.y < -250) { d.y = 195; d.r = 13; } e.y -= 8; e.r += 2; if (e.y < -200) { e.y = 195; e.r = 10; } f.y -= 8; f.r += 2; if (f.y < -220) { f.y = 200; f.r = 10; } g.y -= 8; g.r += 2; if (g.y < -250) { g.y = 195; g.r = 10; } } redraw(); clearinterval(moveintervalid); moveintervalid = setinterval(move, 100); // initial animation before slider used /* uses slider output determine how animate executed. reverses number when user positions slider right, code executed more (faster smoke); likewise, when positioned left, executed less (slower smoke). */ function outputupdate(counter) { document.queryselector('#speed').value = counter; clearinterval(moveintervalid); moveintervalid = setinterval(move, (200-counter)); }body { padding-left: 2em; } canvas { border: 1px solid grey; background-color: #4a6485; display: block; } #fakelinks { position: relative; color: blue; font-family: arial; top: -10; left: -25; } span { color: black; } #icon { position: relative; top: 12; left: -5; } #setspeed { position: relative; top:0; left:180; right:0; bottom:1000; } #speed { color: white; } #info { position: relative; top:0; left:0; right:0; bottom:0; }<!-- stars or snow; separate function smoke - not work range?; stars behind smoke; rid of range # --> <html lang="en"> <head> <title>luong, jessica | qin, ashley</title> <div id="fakelinks"> <img id="icon" src="images/houseicon.png" alt="houseicon">vancouver, bc <span>></span> housing <span>></span> rent</div> <h2>get out of cold , stay @ our winter vacation rental!</h2> <div class="wrapper"> <canvas id="canvas" width="500" height="500"></canvas> <input id="setspeed" type="range" min="0" max="200" value="100" oninput="outputupdate(value)" name="sliderinput"/> <output for="setspeed" id="speed" name="slideroutput"></output> </div> <link rel="stylesheet" href="style/house.css"> </head> <!--commented out use in snippet <script src="house.js"></script> --> <body onload="drawsnow()"> <div id ="info"> <p>everything completed. have working fireplace , electricity.</p> <p>there no major challenges in construction of house.</p></br> <p>for more information please contact: </p> <p> </p> <p></p> </div> </body> </html>
Comments
Post a Comment