キャンバス再起動ボタンクリック

Question

ボタンをクリックすると表示されるキャンバス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); 

}); 

そして、これは簡単なjQueryのcanvas要素を表示するために使用されます。

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

私は様々な機能を実行しようとしてきたが、私はできませんクラスtwoのボタンをクリックするとキャンバスのアニメーションが再開されるようです。

誰でも手助けできますか？

Answer 1

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() { 
 
\t canvasDisplayed = true; 
 
\t canvas = document.getElementById('canvas2'); 
 
    context = canvas.getContext('2d'); 
 

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

 
function resetSquare() { 
 
\t posX = 20; 
 
    posY = canvas.height/2; 
 
    vx = 8, 
 
    vy = -10; 
 
    gravity = 1; 
 
} 
 

 

 
function animation() { 
 
\t resetSquare() 
 
\t animationEnd() 
 
    intervalAnimation = setInterval(function(){ 
 
    \t \t context.fillStyle = "black"; 
 
\t \t 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() { 
 
\t context.fillStyle = "black"; 
 
\t 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>

Answer 2

あなただけの機能にそれを入れて、唯一のボタンがクリックされたときにそれを起動することができます。

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