Comment faire un compteur en utilisant un canevas en javascript

J'essaie de créer un compteur de sorte que chaque fois que vous cliquez sur votre souris, vous voyez le nombre de clics dans le canevas. Mais il ne met pas à jour la toile.Comment faire un compteur en utilisant un canevas en 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>

Source

2014-04-17 Sean W

Je changé le code pour ajouter une fonction redraw() à redessiner sur la toile le nouveau numéro.

Et la fonction increment() appellera celle-ci après avoir fait 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();

Vous ne pouvez pas simplement utiliser innerHTML pour toile car il est vraiment juste une surface de dessin sur elle est donc pas affecté par ses DOM intérieur.

Voici un working JSFiddle demo.

Source

2014-04-17 01:01:34

Votre code renvoie une erreur, window.requestAnimaitonFrame nécessite un rappel à une fonction en tant que paramètre. Ce code fonctionne:

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

Source

2014-04-17 00:58:37 juvian

Cela demande vraiment beaucoup de ressources sans aucun but. L'exécution constante de 'requestAnimationFrame' brûle le CPU. –

Je sais, mais je ne pouvais pas être certain que le compteur serait la seule chose voulue sur toile. Votre réponse est la meilleure correspondant à cette exigence particulière bien que – juvian

Comment faire un compteur en utilisant un canevas en javascript

Répondre

Questions connexes