順利更新HTML5畫布正確

Question

這裏是我的問題的一個簡單的例子： http://jsfiddle.net/kaninepete/GqQBx/2/

我想在框中的數字由在（對於farkle遊戲）類型的數量增加。 看起來非常簡單，但我無法獲得任何方法。 我目前的「更新」功能是從this question. 我用錯了嗎？

我的最終目標是將字段右側用作輸入，而不是提示，但是這可能會導致主題。

Answer 1

它看起來像只有畫布的初始更新。 update（）函數被調用，但僅更新變量，不會在該點之後更新畫布。

var elem = document.getElementById('tallyDisp'); 
var tally = 0; 


function update() { 
    tally += prompt("Update"); 
    window.setTimeout(100, update); 
    if (elem && elem.getContext) { 
     var context = elem.getContext('2d'); 
     if (context) { 
      context.fillStyle = '#9f9'; 
      context.fillRect(0, 0, 300, 200); 
      context.fillStyle = '#00f'; 
      context.font = 'bold 100px sans-serif'; 
      context.textAlign = 'center'; 
      context.textBaseline = 'middle'; 
      context.fillText(tally, 150, 100); 
     } 
    } 
} 
update(); 

//function ask() { 
// tally += parsInt(prompt("Ask")); 
//   context.fillStyle = '#9f9'; 
//  context.fillRect(0, 0, 300, 200); 
//  context.fillStyle = '#00f'; 
//  context.font = 'italic 100px sans-serif'; 
//  context.textAlign = 'center'; 
//  context.textBaseline = 'middle'; 
//  context.fillText(tally, 150, 100); 
//} 
//ask(); 

Answer 2

我不知道這是否是一個很好的做法或沒有，但我已經看到了這之前...

context.width = context.width; // Clears the canvas