Fatal编程技术网
  • javascript/
  • 如何在使用setTimeout Javascript在画布上绘制后隐藏元素

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

javascript jquery html canvas

如何在使用setTimeout Javascript在画布上绘制后隐藏元素,javascript,jquery,html,canvas,settimeout,Javascript,Jquery,Html,Canvas,Settimeout,我已经使用JavaScript在按下按钮后使用SetTimeout在设置的时间之后在画布上的特定点绘制圆圈 如何使圆圈在设定的时间后或在下一个圆圈出现之前消失 JavaScript //button function MButton() { drawOnCanvas(); Circle(); Circle2(); } function drawOnCanvas() { var canvas = document.getElementById("canvas_

我已经使用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()">


不支持画布标记
我是新来的，我会非常感谢你的帮助

您必须使用clearRect命令

context.clearRect ( x , y , w , h );
这将为你扫除这片区域

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

为每个圆创建包含该圆信息的javascript对象

对象包含有关如何绘制圆的信息：x、y、半径、颜色

该对象还保存有关绘制后对象将显示多长时间的信息。这就是下面示例中的visibleDuration。visibleDuration:750表示此圆圈应保持可见750ms，然后消失

该对象还保存有关在消失前应显示多长时间的信息。这就是下面示例中的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优先于设置超时（在Google上查看原因！）

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

// reduce visibleCountdown by the elapsed time

visibleCountdown -= elapsedTimeSinceLastTimeInLoop

if(visibleCountdown>0){

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

}
以下是示例代码和演示：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var循环={}；
我是红色的=({
x:100，
y:100，
半径：25，
颜色：“红色”，
访问持续时间：750，
可见倒计时：0
});
蓝色=({
x:175，
y:150，
半径：20，
颜色：“蓝色”，
访问持续时间：1500，
可见倒计时：0
});
var startTime=lastTime=performance.now（）；
制作动画（）；
函数动画（currentTime）{
请求动画帧（动画）；
clearRect（0,0，canvas.width，canvas.height）；
var已用时间=currentTime lastTime；
lastTime=当前时间；
for（圆圈中的变量i）{
变量圆=圆[i]；
circle.visibleCountdown-=已过；
如果（圆圈可见倒计时>0）{
画圈（圈）；
}
}
}
函数drawCircle（圆）{
ctx.globalAlpha=circle.visibleCountdown/circle.visibleDuration；
ctx.beginPath（）；
ctx.弧（圆.x，圆.y，圆.半径，0，数学PI*2）；
ctx.closePath（）；
ctx.fillStyle=circle.color；
ctx.fill（）；
ctx.globalAlpha=1.00；
}
函数显示循环（循环）{
circle.visibleCountdown=circle.visibleDuration
}
$（“#红色”）。单击（函数（）{
showCircle（圆圈[“红色”]）；
});
$（“#蓝色”）。单击（函数（）{
showCircle（圆圈[“蓝色”]）；
});
}); // end$（函数（）{}）；
显示红色0.75秒

蓝色显示1.50秒
我应该将该命令放在哪里，我还使用javascript绘制了一些用于背景的项目，这些项目在我按下按钮之前就在那里，我想呆在那里不被清除。因此，我不能100%确定您想要实现什么，但如果您想在x秒后清除任意点：函数（圆圈）{setTimeout（函数（）{context.clearRect（circle.x，circle.y，circle.width，circle.height）；}，xSeconds）；}因此据我所知，使用画布无法真正实现这一点。如果需要多层独立绘图，请检查以下线程： 
// reduce visibleCountdown by the elapsed time

visibleCountdown -= elapsedTimeSinceLastTimeInLoop

if(visibleCountdown>0){

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

}

<!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>