Question

在按下按钮后，我使用JavaScript在设置时间后使用SetTimeout在画布上的特定点绘制圆圈。

如何让圆圈在一段时间后或下一个圆圈出现之前消失？

的JavaScript

//button
function MButton() {
    drawOnCanvas();

    Circle();
    Circle2();
}

function drawOnCanvas() {

    var canvas = document.getElementById("canvas_1");

    if (canvas.getContext) {
        canvas_context = canvas.getContext("2d");
        //alert("alert draw");
        setTimeout();
    }
}

function Circle() {
    setTimeout(function () {
        canvas_context.fillStyle = "red";
        canvas_context.beginPath();
        canvas_context.arc(195, 180, 10, 0, Math.PI * 2, true);
        canvas_context.closePath();
        canvas_context.fill();
    }, 300);
}

function Circle2() {
    setTimeout(function () {
        canvas_context.fillStyle = "red";
        canvas_context.beginPath();
        canvas_context.arc(285, 180, 10, 0, Math.PI * 2, true);
        canvas_context.closePath();
        canvas_context.fill();
    }, 1500);
}

HTML

<CANVAS WIDTH="360" HEIGHT="300" ID="canvas_1">
    Canvas tag not supported
</CANVAS>

<INPUT TYPE ="Button" VALUE="  Play  " onClick="MButton()">

我是新手，我真的很感激帮助！

Answer 1

以下是创建在指定时间后消失的画布圆的一般步骤

为包含该圈子信息的每个圈子创建javascript对象。

该对象包含有关如何绘制圆的信息：x，y，radius，color

该对象还保存有关对象在绘制后显示的时间长度的信息。这是下面示例中的visibleDuration。 visibleDuration：750表示此圆圈应保持可见750毫秒然后消失

该对象还保存有关它消失前应显示多长时间的信息。这是下面示例中的visibleCountdown。当用户单击“显示红色圆圈”按钮时，visibleCountdown将设置为750. visibleCountdown在动画帧中递减。

circles.red=({
    x:100,
    y:100,
    radius:25,
    color:"red",
    visibleDuration:750,    // this circle disappears after 750ms
    visibleCountdown:0      // this is used as a display countdown timer for this circle
});

使用高效的requestAnimationFrame方法创建动画循环。

出于性能原因，

requestAnimationFrame优于setTimeout（请查看Google上的原因！）

// begin the animation loop

animate();

// This is an animation loop using the highly-efficient requestAnimationFrame method
// It will run about 60 x per second

function animate(){

    requestAnimationFrame(animate);

}

在动画循环中，如果他们的visibleCountdown尚未过期，则绘制每个圆圈

// reduce visibleCountdown by the elapsed time

visibleCountdown -= elapsedTimeSinceLastTimeInLoop

if(visibleCountdown>0){

    // draw this circle since it's countdown is still above zero

}

以下是示例代码和演示：http://jsfiddle.net/m1erickson/utdG8/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var circles={};
    circles.red=({
        x:100,
        y:100,
        radius:25,
        color:"red",
        visibleDuration:750,
        visibleCountdown:0
    });
    circles.blue=({
        x:175,
        y:150,
        radius:20,
        color:"blue",
        visibleDuration:1500,
        visibleCountdown:0
    });

    var startTime=lastTime=performance.now();

    animate();

    function animate(currentTime){

        requestAnimationFrame(animate);

        ctx.clearRect(0,0,canvas.width,canvas.height);

        var elapsed=currentTime-lastTime;
        lastTime=currentTime;

        for(var i in circles){
            var circle=circles[i];
            circle.visibleCountdown-=elapsed;
            if(circle.visibleCountdown>0){
                drawCircle(circle);
            }
        }
    }

    function drawCircle(circle){
        ctx.globalAlpha=circle.visibleCountdown/circle.visibleDuration;
        ctx.beginPath();
        ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle=circle.color;
        ctx.fill();
        ctx.globalAlpha=1.00;
    }

    function showCircle(circle){
        circle.visibleCountdown=circle.visibleDuration
    }

    $("#red").click(function(){
        showCircle(circles["red"]);
    });

    $("#blue").click(function(){
        showCircle(circles["blue"]);
    });

}); // end $(function(){});
</script>
</head>
<body>
    <button id="red">Show Red for 0.75 seconds</button><br>
    <button id="blue">Show Blue for 1.50 seconds</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

您必须使用clearRect命令

context.clearRect ( x , y , w , h );

这会为你消灭这个区域！

如何使用setTimeout Javascript在画布上绘制后隐藏元素

2 个答案: