키보드 입력으로 html5 캔버스 자바 스크립트 애니메이션을 일시 중지하는 방법

Question

나는 drawArc라는 애니메이션 기능이 있지만 일시 중지하고 키보드 입력을 사용하여 일시 중지 할 수 있어야합니다. 그러나 어떻게 작동했는지는 알지만 그래도 아무 것도 시도하지 않았습니다. . 어떤 도움을 주시면 감사하겠습니다. 감사.

if(window.addEventListener) 
{ 
window.addEventListener 
('load', onLoad, false); 
window.addEventListener 
('keydown',onKeyDown, false); 
} 

function onKeyDown(event) 
{ 
var keyCode = event.keyCode; 
switch(keyCode) 
{ 
    case 80: //p 
    togglePause(); 
    break; 
} 
} 

function togglePause() 
{ 
    if (!Paused) 
    { 
     clearInterval(drawArc); 
     Paused = true; 
    } 
    else if (Paused) 
    { 
     setInterval(drawArc, time); 
     Paused = false; 
    } 
} 

function onLoad() 
{ 
    var canvas; 
    var context; 
    var angle = 0; 
    var time= 20; 
    var paused = true; 

function initialise() 
{ 
    canvas = document.getElementById('canvas'); 

    if (!canvas) 
    { 
     alert('Error: I cannot find the canvas element!'); 
     return; 
    } 

    if (!canvas.getContext) 
    { 
     alert('Error: no canvas.getContext!'); 
     return; 
    } 

    context = canvas.getContext('2d'); 
    if (!context) 
    { 
     alert('Error: failed to getContext!'); 
     return; 
    } 

return setInterval(drawArc, time) 

} 

Answer 1

이 시도 :

var canvas 
    , context 
    , angle = 0 
    , time= 20 
    , paused = false 
    , timer; 

if (window.addEventListener) { 
    window.addEventListener('load', initialise, false); 
    window.addEventListener('keydown',onKeyDown, false); 
} 

function onKeyDown(event) { 
    var keyCode = event.keyCode; 
    switch(keyCode){ 
    case 80: //p 
     togglePause(); 
     break; 
    } 
} 

function togglePause() { 
    if (!paused){ 
    clearInterval(timer); 
    paused = true; 
    } else { 
    timer = setInterval(drawArc, time); 
    paused = false; 
    } 
} 

function initialise() { 
    canvas = document.getElementById('canvas'); 

    if (!canvas){ 
    alert('Error: I cannot find the canvas element!'); 
    return; 
    } 

    if (!canvas.getContext){ 
    alert('Error: no canvas.getContext!'); 
    return; 
    } 

    context = canvas.getContext('2d'); 
    if (!context){ 
    alert('Error: failed to getContext!'); 
    return; 
    } 

    timer = setInterval(drawArc, time) 
} 

function drawArc(){ 
    // do your drawing here 
    // I'm just setting body text so you can see togglePause working 
    document.body.innerHTML = Math.random(); 
} 

http://jsbin.com/udebiv/2/edit도 실행뿐만 아니라 변수 유효 몇 가지 문제에서 코드의 원인이 된 몇 가지 구문 문제가 있었다.