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;

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

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

1 个答案: