如何使用鍵盤輸入暫停html5畫布javascript動畫

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

試試這個： http ： //jsbin.com/udebiv/2/edit

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

有一些語法問題導致代碼甚至執行，以及變量作用域的一些問題。