使用setTimeout重复一个滑块功能来控制速度

嗨那里我有问题让我的功能（这是一个圆圈）重复。代码是用于从顶部冒出烟雾的房子。烟雾应该是一组几圈，从烟囱里冒出来。这些圆圈由setTimeout方法控制，该方法连接到html脚本中的滑块，该脚本控制烟雾从烟囱中吹出的速度。我的问题是，我可以让圈子动画一次，但它不会返回到原来的位置，并继续循环。我究竟做错了什么？任何帮助将被认可。这里是代码：使用setTimeout重复一个滑块功能来控制速度

的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; 
}

来源

2016-11-12 Rgoat

如果下面的行添加到animate2功能：

if (posY < -13) posY = 100;

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

来源

2016-11-12 02:13:17 Jon

omg非常感谢你！ – Rgoat

如何让多个烟雾同时移动？ – Rgoat

使用setTimeout重复一个滑块功能来控制速度

回答

相关问题