javascript - 输入 slider 的 setInterval 无法正常工作-6ren

javascript - 输入 slider 的 setInterval 无法正常工作

转载作者：行者123 更新时间：2023-12-03 05:40:10

我的代码是一座烟囱里冒出烟的房子。烟雾由 setInterval 函数控制，该函数连接到 HTML 页面上的 slider ，该 slider 旨在控制烟雾吹出的速度，但当您移动 slider 时，它会重新启动烟雾功能。

如何设置 slider 来控制烟雾的速度？

这是我的代码:

/*
    Draws each floor of the canvas.
*/
function drawFloor() {
    ctx.fillStyle = "white";
    ctx.fillRect(0, 250, 500, 250);
}
/*
    Draws the front side of the 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 the side of the 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 the chimney of the 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 the roof of the 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 the roof at the from
    ctx.lineWidth=10;
    ctx.strokeStyle = "#C55463";
    ctx.beginPath();
    ctx.moveTo(275,250); //top
    ctx.lineTo(220,336); //bot
    ctx.stroke();
    // draw right line of the roof at the from
    ctx.lineWidth=10;
    ctx.strokeStyle = "#C55463";
    ctx.beginPath();
    ctx.moveTo(275,245); //top
    ctx.lineTo(330,352); //bot
    ctx.stroke();
}
/*
    Draws the door of the house.
*/
function drawDoor(){
    // draws the top of the door
    ctx.beginPath();
    ctx.arc(278, 351, 19, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fillStyle = "#C18459";
    ctx.fill();
    // draws the bottom of the 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 the door knob
    ctx.beginPath();
    ctx.arc(288, 363, 4, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fillStyle = "	#5F371F";
    ctx.fill();
}
/*
    Draws the window of the 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 the 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 the 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 the snowman in the 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 the falling snow.
*/
function drawSnow() {
    for (var i = 0; i < 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 the stars in the 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 the canvas dom object
var ctx = canvas.getContext("2d"); //get the context
/*
    Create objects a to g that make up the smoke.
    Each object is placed off screen, and only their shadows
    remain on the screen.
*/
var a = {   //create object a of the smoke
    x:621,  //x value
    y:250,  //y value
    r:13    //radius
}
var b = {   //create object b of the smoke
    x:595,
    y:190,
    r:13
}
var c = {   //create object c of the smoke
    x:605,
    y:180,
    r:13
}
var d = {   //create object d of the smoke
    x:620,
    y:210,
    r:13
}
var e = {   //create object e of the smoke
    x:610,
    y:170,
    r:10
}
var f = {   //create object f of the smoke
    x:610,
    y:250,
    r:8
}
var g = {   //create object g of the smoke
    x:650,
    y:200,
    r:8
}
/*
    Draws all components on the 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 the 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 the object b
    ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();  //draw the object c
    ctx.arc(c.x, c.y, c.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();  //draw the object d
    ctx.arc(d.x, d.y, d.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();  //draw the object e
    ctx.arc(e.x, e.y, e.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();  //draw the object f
    ctx.arc(f.x, f.y, f.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();  //draw the 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 and moves it up the canvas.
    Returns each one to a specified position and size after it reaches
    a specified point above the canvas.
*/
function move(){
    a.y -= 8;   // move circle up canvas
    a.r += 2;   // increase circle in size
    if (a.y < -100) {   
        // if the circle reaches this position, it returns to specified position
        //   and size
        a.y = 195;  // returns to this position
        a.r = 13;   // returns to this 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 is used
/*
    Uses slider output to determine how often the animate is executed.
    Reverses the number so that when user positions the slider to the right,
    the code is executed more often (faster smoke); likewise, when it is
    positioned to the left, it is executed less often (slower smoke).
*/
function outputUpdate(counter) {
    var canvas = document.getElementsByTagName("canvas")[0]; //get the canvas dom object
    var ctx = canvas.getContext("2d"); //get the context
    /*
        Create objects a to g that make up the smoke.
        Each object is placed off screen, and only their shadows
        remain on the screen.
    */
    var a = {   //create object a of the smoke
        x:621,  //x value
        y:250,  //y value
        r:13    //radius
    }
    var b = {   //create object b of the smoke
        x:595,
        y:190,
        r:13
    }
    var c = {   //create object c of the smoke
        x:605,
        y:180,
        r:13
    }
    var d = {   //create object d of the smoke
        x:620,
        y:210,
        r:13
    }
    var e = {   //create object e of the smoke
        x:610,
        y:170,
        r:10
    }
    var f = {   //create object f of the smoke
        x:610,
        y:250,
        r:8
    }
    var g = {   //create object g of the smoke
        x:650,
        y:200,
        r:8
    }
    /*
        Draws all components on the 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 the 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 the object b
        ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
        ctx.closePath();
        ctx.fill();

        ctx.beginPath();  //draw the object c
        ctx.arc(c.x, c.y, c.r, 0, Math.PI*2);
        ctx.closePath();
        ctx.fill();

        ctx.beginPath();  //draw the object d
        ctx.arc(d.x, d.y, d.r, 0, Math.PI*2);
        ctx.closePath();
        ctx.fill();

        ctx.beginPath();  //draw the object e
        ctx.arc(e.x, e.y, e.r, 0, Math.PI*2);
        ctx.closePath();
        ctx.fill();

        ctx.beginPath();  //draw the object f
        ctx.arc(f.x, f.y, f.r, 0, Math.PI*2);
        ctx.closePath();
        ctx.fill();

        ctx.beginPath();  //draw the 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 and moves it up the canvas.
        Returns each one to a specified position and size after it reaches
        a specified point above the canvas.
    */
    function move(){
        a.y -= 8;   // move circle up canvas
        a.r += 2;   // increase circle in size
        if (a.y < -100) {   
            // if the circle reaches this position, it returns to specified position
            //   and size
            a.y = 195;  // returns to this position
            a.r = 13;   // returns to this 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
for smoke - does not work with range?; stars behind smoke; get 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> for rent</div>
      <h2>Get out of the cold and stay at 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 for use in snippet     <script src="house.js"></script>  -->
<body onLoad="drawSnow()">
    <div id ="info">
        <p>Everything is completed. We have a working fireplace and electricity.</p>
        <p>There were no major challenges in the construction of this house.</p></br>
        <p>For more information please contact: </p>
        <p> </p>
        <p></p>
    </div>
</body>
</html>

最佳答案

在 outputUpdate() 中，您重新定义了大量变量，以及 move() 和 redraw() 函数。唯一的区别是，在重新定义的 redraw() 中，您不调用 drawCandy()。通过重新定义这些来完成您想要做的任何事情，这是一种荒谬的方式。我不确定那是什么。如果您确实不想调用drawCandy()，请传递一个参数，或设置一个全局变量。不要重复代码。重复代码导致了严重的问题。

您在 setInterval() 方面遇到的问题是，您在设置以不同速率更新的新间隔之前没有清除任何间隔。这会导致您创建大量间隔计时器，从而导致 CPU 陷入困境。为了解决这个问题，我只是使用了暴力的方法，创建全局变量moveIntervalId来存储间隔ID，然后调用clearInterval()之前 setInterval()来电。

我还将烟雾绘制到了它自己的函数中。

var moveIntervalId;

/*
    Draws each floor of the canvas.
*/
function drawFloor() {
    ctx.fillStyle = "white";
    ctx.fillRect(0, 250, 500, 250);
}
/*
    Draws the front side of the 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 the side of the 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 the chimney of the 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 the roof of the 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 the roof at the from
    ctx.lineWidth=10;
    ctx.strokeStyle = "#C55463";
    ctx.beginPath();
    ctx.moveTo(275,250); //top
    ctx.lineTo(220,336); //bot
    ctx.stroke();
    // draw right line of the roof at the from
    ctx.lineWidth=10;
    ctx.strokeStyle = "#C55463";
    ctx.beginPath();
    ctx.moveTo(275,245); //top
    ctx.lineTo(330,352); //bot
    ctx.stroke();
}
/*
    Draws the door of the house.
*/
function drawDoor(){
    // draws the top of the door
    ctx.beginPath();
    ctx.arc(278, 351, 19, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fillStyle = "#C18459";
    ctx.fill();
    // draws the bottom of the 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 the door knob
    ctx.beginPath();
    ctx.arc(288, 363, 4, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fillStyle = "	#5F371F";
    ctx.fill();
}
/*
    Draws the window of the 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 the 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 the 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 the snowman in the 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 the falling snow.
*/
function drawSnow() {
    for (var i = 0; i < 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 the 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 the 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 the object b
    ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();  //draw the object c
    ctx.arc(c.x, c.y, c.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();  //draw the object d
    ctx.arc(d.x, d.y, d.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();  //draw the object e
    ctx.arc(e.x, e.y, e.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();  //draw the object f
    ctx.arc(f.x, f.y, f.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();  //draw the object g
    ctx.arc(g.x, g.y, g.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}
/*
    Draws the stars in the 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 the canvas dom object
var ctx = canvas.getContext("2d"); //get the context
/*
    Create objects a to g that make up the smoke.
    Each object is placed off screen, and only their shadows
    remain on the screen.
*/
var a = {   //create object a of the smoke
    x:621,  //x value
    y:250,  //y value
    r:13    //radius
}
var b = {   //create object b of the smoke
    x:595,
    y:190,
    r:13
}
var c = {   //create object c of the smoke
    x:605,
    y:180,
    r:13
}
var d = {   //create object d of the smoke
    x:620,
    y:210,
    r:13
}
var e = {   //create object e of the smoke
    x:610,
    y:170,
    r:10
}
var f = {   //create object f of the smoke
    x:610,
    y:250,
    r:8
}
var g = {   //create object g of the smoke
    x:650,
    y:200,
    r:8
}
/*
    Draws all components on the canvas.
*/
function redraw(){
    drawSmoke();
    drawStars();
    drawFloor();
    drawFront();
    drawSide();
    drawChimney();
    drawRoof();
    drawDoor();
    drawWindow();
    drawTree();
    drawSnowman();
    drawSnow();
    drawCandy();
    requestAnimationFrame(redraw);
}
 
/*
    Increases each smoke component in size and moves it up the canvas.
    Returns each one to a specified position and size after it reaches
    a specified point above the canvas.
*/
function move(){
    a.y -= 8;   // move circle up canvas
    a.r += 2;   // increase circle in size
    if (a.y < -100) {   
        // if the circle reaches this position, it returns to specified position
        //   and size
        a.y = 195;  // returns to this position
        a.r = 13;   // returns to this 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 is used
/*
    Uses slider output to determine how often the animate is executed.
    Reverses the number so that when user positions the slider to the right,
    the code is executed more often (faster smoke); likewise, when it is
    positioned to the left, it is executed less often (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
for smoke - does not work with range?; stars behind smoke; get 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> for rent</div>
      <h2>Get out of the cold and stay at 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 for use in snippet     <script src="house.js"></script>  -->
<body onLoad="drawSnow()">
    <div id ="info">
        <p>Everything is completed. We have a working fireplace and electricity.</p>
        <p>There were no major challenges in the construction of this house.</p></br>
        <p>For more information please contact: </p>
        <p> </p>
        <p></p>
    </div>
</body>
</html>

关于javascript - 输入 slider 的 setInterval 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40570851/

文章推荐： asp.net-mvc - 防伪 token 无法解密

文章推荐： notepad++ - 删除所有换行符并将其添加到特定文本之后

文章推荐： javascript - 如何将 2D 数组从 JavaScript 传递到 PHP

javascript - setInterval 覆盖其他 setIntervals
这个问题已经有答案了: JavaScript closure inside loops – simple practical example (45 个回答) 已关闭 8 年前。我试图创建多个 se
setinterval - 如何用 requestAnimationFrame 替换 setInterval
这是我的情况，我需要加快函数运行时间，所以 setInterval 不是一个明智的选择，对吧？因为每次至少要花费 4 毫秒。所以，我可以将 setInterval 函数更改为 requestAnim
javascript setInterval - 如何多次调用并保留 setInterval Id？
我正在尝试下面的代码，看看是否可以将 setInterval Id 存储为关联数组中唯一键的值，然后通过使用唯一值作为键来停止被调用函数中的间隔，如下所示我将 setInterval Id 作为它的值
javascript - setInterval 在另一个 setInterval 中随着时间的推移而加速
我花了很长时间试图弄清楚如何使用具有 CSS 样式缓动功能的 Google Maps API 为折线上的符号设置动画。我让它工作 with this Gist和 this Google Maps AP
javascript - 倒数计时器，setInterval 内的 setInterval？
我是这里的 JS 新手，正在研究一个在给定时间段后开始的倒数计时器。基本上，当用户单击按钮时时钟开始，第二个时钟在第一个计时器用完时开始。我知道“setInterval”是完成这个的最好方法。我面临的
jquery - 使用 setInterval 到另一个 Setinterval
嗨， friend 们，我想只使用一个 setInterval 函数来运行我的代码。目前我正在使用两个 setInterval's 来实现我的目标，我们可以只使用一个 'setInterval' 来获
jQuery setInterval/悬停 : it works once, 但随后停止 setInterval
我的“setInterval”函数有问题，我想在将鼠标悬停在 div 上时启动该函数，但是 setInterval 在我将鼠标悬停在 div 上时第一次起作用=>如果我停留在div，它不会继续改变图片
javascript - 为什么我的第一个 setInterval 停止而第二个 setInterval 继续运行？
我想展示两次:一次在你的国家，一次在日本用JS 问题是第二个 setInterval 停止了第一个，我不知道如何进行两次运行。完整代码 In your region:
javascript - 哪种方式更好，setInterval() 或 window.setInterval()？
好吧，这个问题有几个问题。首先，我要求 setTimeout() 和 setInterval() 我见过几种不同的调用方式，我想知道哪种方式最适合这种情况。我正在制作一个 js/canvas 游戏
javascript - 在 1 秒内重定向 setinterval javascript 或根据条件停止 setinterval
setInterval(function () { //======= //code //======== if(--timer&etype="; } },1000); 这里定时器结束后，而不是重定
javascript - 为了性能更好，两个函数在同一个 setInterval() 中还是两个不同的 setInterval 中？ - JavaScript
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 5 年前。 Improv
javascript - setInterval(func) 和 setInterval(function(){func()}) 有什么区别
我的前老板有一个 weird bug where when he used setInterval with a long delay interval : setInterval(func, 300
javascript - ES6 setInterval(() => foo(), 1000 与 setInterval(foo, 1000)
这个问题已经有答案了: How does the "this" keyword work, and when should it be used? (22 个回答) How to access the
javascript - setInterval ("/*some code*/", time) 和 setInterval(function() {/*一些代码*/}, time)
我的印象是 setInterval("/*some code*/", time) 相当于 setInterval(function() { /*some code*/ }, time) 显然不是
javascript - NodeJS 中的事件，在 setInterval 内发出事件，但在没有 setInterval 时则不会发出事件
我对 JavaScript 和 NodeJS 非常陌生，我只是想了解 NodeJS 中的发射器模式。当我尝试使用 setInterval 函数每秒发出一个刻度事件时，程序似乎工作正常:-
javascript - 在 java 脚本中的 setTimeout 方法内调用 setInterval 函数获取 setInterval(...) 不是函数错误
我有一个简单的 setTimeout 函数，它在特定时间运行并且工作正常: var now = new Date(); var milliTillExec = new Date(now.getFull
Javascript setInterval()
在本教程中，您将借助示例了解 JavaScript setInterval() 方法。在 JavaScript 中，可以在指定的时间间隔内执行一段代码。这些时间间隔称为定时事件。有
PHP的无限循环或jQuery setInterval？
Js: function cometConnect(){ $.ajax({ cache:false, type:"post", d
javascript检查元素是否可见并相应地设置 "setInterval"
LE2。关于如何解决此问题的任何其他想法？我有这段代码，但不知道为什么不能正常工作: $(function autorun() { if ($("#contactForm").is(":visibl
一段时间内的Javascript setinterval
这个问题在这里已经有了答案: How to make a setInterval stop after some time or after a number of actions? (6 个答案)

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 输入 slider 的 setInterval 无法正常工作