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/

＆＃13;

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)
}

＆＃13;

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

＆＃13;

画布重新启动按钮单击

2 个答案: