Chronomètre dans un canvas
parousky
Messages postés
325
Date d'inscription
Statut
Membre
Dernière intervention
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour, je commence à utiliser les canvas en Javascript et j'aimerais faire apparaître un chronomètre dans ce canvas. Alors pour fare un truc tout simple, j'aimerais faire seulement un chrono qui compte les secondes. Donc j'ai écrit ce code là :
Page PHP :
<!DOCTYPE html>
<html>
<head>
<script src="canvas.js" type="text/javascript"></script>
</head>
<meta charset="utf-8" />
<link rel="stylesheet" href="canvas.css" />
<canvas class="canvas" id="canvas" width="1000" height="1000">
Impossible avec ton navigateur !
</canvas>
</html>
Et ma page js :
var time = 0;
var desert = new Image();
desert.src = "desert.gif";
window.onload = function game()
{
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,1000,1000);
ctx.drawImage(desert, 0, 0, 1000, 1000);
time ++;
ctx.font = "20pt Calibri,Geneva,Arial";
ctx.strokeStyle = "rgb(0,0,0)";
ctx.fillStyle = "rgb(0,20,180)";
ctx.strokeText(""+time+"", 10, 20);
compte=setTimeout('game()',1000) // est sensé relancer ma fonction toutes les //secondes
}
Mais lorsque je lance ma page, la valeur 1 s'affiche (donc pas de problème d'afichage), mais c'est tout, comme si ça ne bouclai pas et que mon "time" restait toujours à 1, voyez-vous une erreur ?
Merci d'avance !
Page PHP :
<!DOCTYPE html>
<html>
<head>
<script src="canvas.js" type="text/javascript"></script>
</head>
<meta charset="utf-8" />
<link rel="stylesheet" href="canvas.css" />
<canvas class="canvas" id="canvas" width="1000" height="1000">
Impossible avec ton navigateur !
</canvas>
</html>
Et ma page js :
var time = 0;
var desert = new Image();
desert.src = "desert.gif";
window.onload = function game()
{
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,1000,1000);
ctx.drawImage(desert, 0, 0, 1000, 1000);
time ++;
ctx.font = "20pt Calibri,Geneva,Arial";
ctx.strokeStyle = "rgb(0,0,0)";
ctx.fillStyle = "rgb(0,20,180)";
ctx.strokeText(""+time+"", 10, 20);
compte=setTimeout('game()',1000) // est sensé relancer ma fonction toutes les //secondes
}
Mais lorsque je lance ma page, la valeur 1 s'affiche (donc pas de problème d'afichage), mais c'est tout, comme si ça ne bouclai pas et que mon "time" restait toujours à 1, voyez-vous une erreur ?
Merci d'avance !
A voir également:
- Chronomètre tremblay sonne toutes les heures
- Tremblay en france roissy pic - Forum Consommation & Internet
- Mon téléphone sonne tous les jours à la même heure ✓ - Forum Mobile
- Téléphone sonne 1 fois puis messagerie - Forum Mobile
- Formation 600 heures en mois ✓ - Forum Bureautique
- Comment savoir quand une personne nous bloque sur portable - Forum Samsung
1 réponse
Bonjour
Si tu affiches les erreurs avec la console de ton navigateur, tu verras que ta fonction game n'est pas définie.
Plusieurs manières pour que cette définition soit effective :
ou bien
Au passage, tu mets ta balise </head trop tôt, <meta> et <link> devraient être avant </head>
Si tu affiches les erreurs avec la console de ton navigateur, tu verras que ta fonction game n'est pas définie.
Plusieurs manières pour que cette définition soit effective :
window.onload = ( game= function () {
/* ta fonction */
});
ou bien
function game() {
/* ta fonction */
}
window.onload=game;
Au passage, tu mets ta balise </head trop tôt, <meta> et <link> devraient être avant </head>