如何在javascript中使用畫布製作計數器

我正在嘗試製作計數器，以便每次單擊鼠標時都會顯示畫布中的點擊次數。但它不更新畫布。如何在javascript中使用畫布製作計數器

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 


<button onclick="function1()">Click Here</button> 

<script> 
var animate = setInterval(window.requestAnimationFrame,1) 

var clicks = 0; 
     function function1() 
     { 
     clicks++; 
     document.getElementById('myCanvas').innerHTML = clicks; 
     }; 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.font="16px Verdana"; 
ctx.fillText("Score: " + clicks,190,20); 
</script> 
</body> 
</html>

來源

2014-04-17 Sean W

所以我改變了代碼添加redraw()功能，在畫布上重新繪製新的號碼。

而increment()函數會在做clicks++後調用該函數。

var clicks = 0; 
function increment(){ 
    clicks++; 
    redraw(); 
}; 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
console.log(ctx); 
function redraw(){ 
    ctx.clearRect(0, 0, c.width, c.height); 
    ctx.font="16px Verdana"; 
    ctx.fillText("Score: " + clicks,190,20); 
} 
redraw();

你不能只用innerHTML畫布，因爲它實際上只是借鑑了表面因此不會受到它的內在的DOM。

這是working JSFiddle demo。

來源

2014-04-17 01:01:34

你的代碼拋出錯誤，window.requestAnimaitonFrame需要一個回調函數的參數。此代碼的工作：

var animate = setInterval(function(){update()},1) 

var clicks = 0; 
    function function1() 
    { 
    clicks++; 
    }; 
function update(){ 

    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.clearRect(0,0,c.width,c.height); 
    ctx.font="16px Verdana"; 
    ctx.fillText("Score: " + clicks,190,20); 
}

來源

2014-04-17 00:58:37 juvian

這是真的*資源密集型，沒有任何目的。不斷運行'requestAnimationFrame'會燒燬CPU。 –

我知道，但我無法確定櫃檯是唯一想要在畫布上展示的東西。您的答案是最符合此特定要求的，但 – juvian

如何在javascript中使用畫布製作計數器

回答

相關問題