캔버스 재시작 단추 클릭

Question

단추를 클릭 할 때 표시되는 캔버스 html 요소가 있습니다.

내가 겪고있는 문제는 캔버스의 애니메이션이 약 1 초간 지속된다는 것입니다. 따라서 버튼을 클릭하여 CSS 속성을 display:none에서 display:inline으로 변경하면 백그라운드에서로드되는 애니메이션이 이미 종료되었습니다.

캔버스 애니메이션을 다시 시작하기 위해 단추를 클릭하기 만하면됩니다. 나는 그것이 백그라운드에서 로딩된다는 것을 염두에 두지 않고 단지 버튼 클릭만으로 다시 시작하기를 원한다. 이 캔버스 내 자바 스크립트

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

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

입니다 :

이

는 캔버스와 버튼에 대한 HTML이다. 애니메이션은 단순히 왼쪽에서 오른쪽으로 튀는 광장입니다 :

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를 캔버스 요소를 표시하는 데 사용됩니다 : 나는 다양한 기능을 시도했습니다

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