使用setTimeout来重复一个带有滑块的函数来控制速度

Question

嗨，我有问题得到我的函数(这是一个圆圈)重复。这个规则是指房顶冒烟的房子。烟应该是一组几个圆圈，将从烟囱吹出来。这些圆圈由setTimeout方法控制，该方法连接到html脚本中的滑块，该滑块控制烟雾从烟囱中吹出的速度。我的问题是，我可以让圆圈动画一次，但它不会返回到它的原始位置，继续循环。我做错了什么?任何帮助都将是感激的。下面是代码:

javascript:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 4;
ctx.strokeLinecap = 'round';
var a = 1;
var speed = 100;
var posY = 100;
var posX = 200;

function foundation() {
    //grass
    ctx.fillStyle = "green";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(25, 375);
    ctx.lineTo(125, 325);
    ctx.lineTo(471, 325);
    ctx.lineTo(400, 375);
    ctx.lineTo(25, 375);
    ctx.fill();
    ctx.stroke();
    //front face ground
    ctx.fillStyle = "#873600";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(25, 375); //top left
    ctx.lineTo(25, 425); //bottom left
    ctx.lineTo(400, 425); //bottom right
    ctx.lineTo(400, 375); //top right
    ctx.lineTo(25, 375); //top line
    ctx.fill();
    ctx.stroke();
    //east face ground 
    ctx.fillStyle = "#872000";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(475, 325); //top right
    ctx.lineTo(475, 375); //bottom right
    ctx.lineTo(400, 425); //bottom line
    ctx.lineTo(400, 375); //top left
    ctx.lineTo(475, 325); //top right
    ctx.fill();
    ctx.stroke();
}
function house() {
    //front face
    ctx.fillStyle = "#2980B9";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(110, 365);
    ctx.lineTo(110, 200);
    ctx.lineTo(375, 200);
    ctx.lineTo(375, 365);
    ctx.lineTo(110, 365);
    ctx.fill();
    ctx.stroke();
    //east face
    ctx.fillStyle = "#1760B4";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(375, 200); //lower left
    ctx.lineTo(415, 180); //
    ctx.lineTo(415, 340);
    ctx.lineTo(375, 365);
    ctx.lineTo(375, 200);
    ctx.fill();
    ctx.stroke();
    //roof front face 
    ctx.fillStyle = "#B41717";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(95, 210);
    ctx.lineTo(160, 140);
    ctx.lineTo(395, 140);
    ctx.lineTo(365, 210);
    ctx.lineTo(365, 210);
    ctx.lineTo(95, 210);
    ctx.fill();
    ctx.stroke();
    //roof east face 
    ctx.fillStyle = "darkred";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(365, 210);
    ctx.lineTo(425, 190);
    ctx.lineTo(395, 140);
    ctx.lineTo(365, 210);
    ctx.fill();
    ctx.stroke();
    //door 
    ctx.fillStyle = "darkred";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(300, 365);
    ctx.lineTo(300, 295);
    ctx.lineTo(250, 295);
    ctx.lineTo(250, 365);
    ctx.lineTo(300, 365);
    ctx.fill();
    ctx.stroke();
    //doorknob
    ctx.fillStyle = "yellow";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.arc(290, 335, 5, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.stroke();
    //walkway
    ctx.fillStyle = "gray";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(250, 365); //left point
    ctx.lineTo(240, 375); //left side
    ctx.lineTo(290, 375);
    ctx.lineTo(300, 365);
    ctx.fill();
    ctx.stroke();
    //window living room
    ctx.fillStyle = "blue";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(143, 347);
    ctx.lineTo(143, 295);
    ctx.lineTo(212, 295);
    ctx.lineTo(212, 347);
    ctx.lineTo(143, 347);
    ctx.fill();
    ctx.stroke();
    //window top left
    ctx.fillStyle = "blue";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(143, 275);
    ctx.lineTo(143, 225);
    ctx.lineTo(212, 225);
    ctx.lineTo(212, 275);
    ctx.lineTo(143, 275);
    ctx.fill();
    ctx.stroke();
    //window top right
    ctx.fillStyle = "blue";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(263, 275);
    ctx.lineTo(263, 225);
    ctx.lineTo(332, 225);
    ctx.lineTo(332, 275);
    ctx.lineTo(263, 275);
    ctx.fill();
    ctx.stroke();
    //chimney front
    ctx.fillStyle = "#B41717";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(170, 130); //top left
    ctx.lineTo(170, 180); //left side line
    ctx.lineTo(200, 180); //bottom line
    ctx.lineTo(200, 130); //right side line
    ctx.lineTo(170, 130); //top side line
    ctx.fill();
    ctx.stroke();
    //chimney east
    ctx.fillStyle = "darkred";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(200, 130); //top left
    ctx.lineTo(215, 123); //top side line
    ctx.lineTo(215, 170); //right side line
    ctx.lineTo(200, 180); //
    ctx.fill();
    ctx.stroke();
    //chimney top
    ctx.fillStyle = "black";
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.moveTo(170, 130); //top left
    ctx.lineTo(185, 122); //left side
    ctx.lineTo(210, 122); //top side
    ctx.lineTo(200, 130); 
    ctx.fill();
    ctx.stroke();
}
function smokeMed() {
    ctx.beginPath();
    ctx.arc(190, 90, 11, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.lineWidth = 5;
    ctx.fillStyle = 'lightgrey';
    ctx.fill();
    ctx.strokeStyle = 'gray';
    ctx.stroke();
}
function smokeBig() {
    ctx.beginPath();
    ctx.arc(210, 70, 15, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.lineWidth = 5;
    ctx.fillStyle = 'lightgrey';
    ctx.fill();
    ctx.strokeStyle = 'gray';
    ctx.stroke();
}

function animate2() {
    var speed = document.getElementById('speedCont').value;
    posY += -1;
    posX +- 1;

        ctx.fillStyle = "aqua";
        ctx.fillRect(0,0, 220, 120);
        ctx.fillStyle = "rgba(0,0,0,0.5)";
        ctx.beginPath();
        ctx.arc(posX, posY, 15, 0, Math.PI*2, true);
        ctx.fill();
    window.setTimeout(animate2, speed);
}
/**   if (a == 1) {
        ctx.clearRect(0, 0, 260, 105);
        smoke();
        a++;
    } else if (a == 2) {
        ctx.clearRect(0, 0, 260, 105);
        smokeMed();
        a++;
    } else if (a == 3) {
        ctx.clearRect(0, 0, 260, 105);
        smokeBig();
        a = 1;
    } else {
        ctx.clearRect(0, 0, 260, 105);
    }
    window.setTimeout(animate2, speed);
}
**/
window.onload = function all() {
    foundation();
    house();
    animate2();
}
window.addEventListener("load", all, false);
//window.setInterval(animate2, 1000);
//window.setTimeout(animate2, speed);

html:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <canvas id="canvas" width="500" height="500">Get a new Browser!</canvas>
    <script src="script.js" ></script>
    <form>
    <input type="range" min="10" max="250" value="100" id="speedCont"/>
</form>
</body>
</html>

css:

#canvas {
    background-color: aqua;
    border: 1px solid black;
    margin-bottom: 10px ;
}
body {
    background-color: gray;
}
input[type=range] {
    -webkit-appearance: none;
    border: 3px solid black;
    width: 500px;
    border-radius: 20px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 500px;
    height: 10px;
    background: #ddd;
    border: none;
    border-radius: 20px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 3px solid black;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: red;
    margin-top: -8px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

Answer 1

如果将以下行添加到animate2函数中:

if (posY < -13) posY = 100;  

然后当烟雾离开画布顶部时，它将从原始位置重新开始。