画布重新启动按钮单击

Question

我有一个canvas html元素，当我单击按钮时会显示该元素。

我遇到的问题是画布中的动画仅持续约1秒。 因此，当我单击按钮以将其CSS属性从display:none更改为display:inline ，动画已经结束，因为它正在后台加载。

我想要发生的是单击按钮以简单地重新启动画布动画。 我不介意它正在后台加载，我只希望它在单击按钮后重新启动。

这是画布和按钮的html：

    <canvas class="canvas2" id="canvas2"></canvas>
    <script src="canvas.js"></script>

    <div class="buttons">
        <button class="two">Canvas 2</button>
    </div>  

这是我的画布JavaScript。 动画只是从左到右的跳动方块：

var canvas = document.getElementById('canvas2');
var c2 = canvas.getContext('2d');

c2.fillStyle = "black";
c2.fillRect(0,0,canvas.width,canvas.height);

var posX = 20;
posY = canvas.height / 2;
vx = 8, 
vy = -10;
gravity = 1;

setInterval(function(){
    c2.fillStyle = "black";
    c2.fillRect(0,0,canvas.width,canvas.height);
    posX += vx;
    posY += vy;

    if (posY > 120){
        vy *= -0.5;
        vx *= 0.5;
        posY = 120;
    }

    vy += gravity;

    c2.fillStyle = "red";
    c2.fillRect(posX, posY, 10, 10);
}, 30);

});

这是用于显示canvas元素的简单jQuery：

$('.two').click(function() {
    $('.canvas2').show();
});

我一直在尝试了各种功能，但我似乎无法得到画布动画与类的按钮时，重新启动two被点击。

有人可以帮忙吗？

Answer 1

您可以将其放入函数中，仅在单击按钮时将其启动：

function animation() {
    var canvas = document.getElementById('canvas2');
    var c2 = canvas.getContext('2d');

    c2.fillStyle = "black";
    c2.fillRect(0,0,canvas.width,canvas.height);

    var posX = 20;
    posY = canvas.height / 2;
    vx = 8, 
    vy = -10;
    gravity = 1;

    setInterval(function(){
        c2.fillStyle = "black";
        c2.fillRect(0,0,canvas.width,canvas.height);
        posX += vx;
        posY += vy;

        if (posY > 120){
            vy *= -0.5;
            vx *= 0.5;
            posY = 120;
        }

        vy += gravity;

        c2.fillStyle = "red";
        c2.fillRect(posX, posY, 10, 10);
    }, 30);

    });
}


$('.two').click(function() {
    $('.canvas2').show();
    animation();
});

Answer 2

https://jsfiddle.net/co047stc/

 var canvas, context; var canvasDisplayed = false; var intervalAnimation = null; var posX, posY, vx, vy, gravity; $('.two').click(function() { if (!canvasDisplayed) { showCanvas() } animation() }); function showCanvas () { canvasDisplayed = true; canvas = document.getElementById('canvas2'); context = canvas.getContext('2d'); context.fillStyle = "black"; context.fillRect(0,0,canvas.width,canvas.height); } function resetSquare () { posX = 20; posY = canvas.height / 2; vx = 8, vy = -10; gravity = 1; } function animation () { resetSquare() animationEnd() intervalAnimation = setInterval(function(){ context.fillStyle = "black"; context.fillRect(0, 0, canvas.width, canvas.height) posX += vx; posY += vy; if (posY > 120){ vy *= -0.5; vx *= 0.5; posY = 120; } vy += gravity; context.fillStyle = "red"; context.fillRect(posX, posY, 10, 10); }, 30); } function animationEnd () { context.fillStyle = "black"; context.fillRect(0, 0, canvas.width, canvas.height) clearInterval(intervalAnimation) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas class="canvas2" id="canvas2"></canvas> <script src="canvas.js"></script> <div class="buttons"> <button class="two">Canvas 2</button> </div>