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

html - 多个背景相互叠加(正常、拉伸(stretch)、正常)
自从我 faced an issue由于背景图片对于不同分辨率的内容来说太短，我尝试将背景分成 3 部分并自动拉伸(stretch)中间部分以相应地填充顶部和底部图像之间的空间。不幸的是我没能在 CS
c++ - QtCUrl post 不再有效(Linux 正常...windows 正常)
我从去年开始就在我的程序中运行这个函数(Linux 和 Windows)。现在我需要实现一个新功能，我的新构建不再运行。我还有其他使用 POST 的 CUrl 函数，结果是一样的:没问题，但我的
haskell - 正常/应用订单减少
在评估函数应用方面，Haskell 是只支持普通降阶还是也支持应用降阶？我是否认为正常顺序是 Haskell 惰性的原因？最佳答案 GHC 运行时不使用术语缩减策略，因为那会非常低效。事实上，GHC
python - 多处理比单个(正常)处理花费的时间更长
怎么来的multi使用多处理池对多个“进程”上的数据进行分段和处理的函数比仅调用 map 慢(8 秒)。功能(6 秒)？ from multiprocessing import Pool import
c++ - OpenGL glVertexAttribPointer 正常
假设我正在渲染一个 3d GL_TRIANGLE。该对象需要 3 个顶点才能定义:A、B、C。我将此类数据放入缓冲区并通过 glVertexAttribPointer 将其绑定(bind)到着色器。
css - 字体粗细(正常、粗体……)
我有一个字体的三个文件，普通的，粗体的和浅色的。由于 font-weight:light 不存在，我该如何在 font-face 上设置 light 呢？顺便问一下，font-weight:ligh
C free() 下一个尺寸无效(正常)
我是 C 的新手，我似乎无法弄清楚什么似乎是一个非常简单的指针问题。我的程序将行号添加到文件中。它逐行读入文件，然后在每行的开头添加一个行号。它在每个文件上都可以正常工作，如下所示: soccer@s
c++ - 正常 block 后检测到堆损坏
我有以下代码，我不确定为什么当它命中 Myclass 的析构函数时我会收到堆损坏检测错误。我相信我正在正确地释放内存？？ #include #include using namespace std
java - 正常 - RPN 转换
有什么方法可以将“正常”数学符号解释为逆波兰符号 (RPN)..？例如1) 2 + 3*4 - 1 = 234*+1-2) 5 (4-8) = 548- 你可以假设遵循 BODMAS 规则并且必须首
css - 三星和苹果默认浏览器样式错误，Chrome 正常
http://www.ergotopia.de/ergonomie-shop/ergonomische-kissen/orthopaedisches-sitzkissen的手机页面应该看起来像右边(检
iOS 无法找到插件，Android 正常
我正在 Phonegap/Cordova 中构建一个应用程序。应用目前相当简单，但确实需要网络状态和地理定位插件才能工作。到目前为止，我已经在 Android 上开发了该应用程序(目前它仅由一些基本
python - TfidfVectorizer 出错但 CountVectorizer 正常
我一整天都在做这个，但没有运气我设法在一行 TfidfVectorizer 中消除了问题这是我的工作代码 from sklearn.feature_extraction.text import C
android - 按下按钮后应用程式当机，但 Action 正常
也许有人看到一个错误，问题是当我按btn2 (button 2)和btn3 (button 3)应用程序crashes时，但操作仍然有效，即video正在运行并且PDF打开，而button 1正常工作
java - 正常 Activity 和选项卡 Activity
我正在开发一个应用程序。它的第一页是登录屏幕。成功登录后，我想将用户带到选项卡式 Activity 。我怎样才能在安卓中做到这一点？谢谢最佳答案在 Android 中，启动 Activity 是通
Vim 正常!发送文字字符串而不是空白字符
我不确定我在这里做错了什么。 :normal! I### 当我对一个单词执行此命令时，我想要的最终结果是: ### word 但是我得到了这个: ###word 最佳答案 Vim 的 :normal是
c - 正常 block 后检测到堆损坏(#63)
我必须将 2 个静态矩阵发送到分配动态矩阵的函数，将矩阵 1 乘以矩阵 2，并返回新矩阵的地址。请注意，COMM 很常见。我尝试删除 free_matrix 行，它工作正常。 void main()
c - GList 行为错误 - 下一个大小无效(正常)
我在我的一个项目中使用 Gnome libglib 并遇到了一个奇怪的错误。我可以输入 GList 的元素数量看起来仅限于 45 个。在第 45 个元素处，它给出了此错误 40 counter 41
c - 获取窗口的当前尺寸，无论最小/正常/最大化状态如何
我正在尝试获取“顶级”HWND 的尺寸。即，我想要 Firefox/Windows 资源管理器等的主 HWND 的当前尺寸。窗口。如果窗口最小化， GetWindowRect() 将不起作用。 Get
php - 什么是索引 - 正常 - 全文 - 唯一
相同的标题:什么是索引 - 正常 - 全文 - 唯一？最佳答案普通索引用于通过仅包含行数据的切片或散列来加速操作。全文索引向数据库的全文搜索 (FTS) 引擎指示它应该将数据存档在给定字段中，以
c++ - gcc - 定义模板时出现多重定义错误(vc++ 正常)
我正在使用 EnumParser来自 here它在 VC++ 中编译得很好，但是使用 gcc 我有这样的错误: ./Terminator.o: In function `EnumParser::Enu

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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