Le langage de programmation Javascript est un outil puissant pour créer des animations dynamiques et interactives. Dans cet article, nous allons explorer un exemple d’animation d’un pixel dans un canvas, en utilisant les fonctionnalités de Javascript. Nous verrons comment créer un canvas, comment dessiner un pixel et comment le déplacer à l’aide de la fonction setInterval. Nous verrons également comment ajouter des effets visuels à l’animation pour la rendre plus intéressante.
Javascript : Exemple d’animation d’un pixel dans un canvas
- Dans ce code Javascript intégré dans une page HTML, je vous montre comment réaliser l’animation d’un pixel en appelant à intervalle régulier une fonction.
<!– Debut de la page HTML –>
<html>
<!– Debut entete –>
<head>
<meta charset=« utf-8 » /> <!– Encodage de la page –>
<title>JavaScript: Test Canva </title> <!– Titre de la page –>
<!– Debut du code Javascript –>
<script language=« javascript » type=« text/javascript »>
<!–
// variables / objets globaux – a declarer avant les fonctions pour eviter problemes de portee
var canvas= null; // objet Canvas
var contextCanvas = null; // objet context Canvas
var compt=0; // variable de comptage
window.onload = function() { // fonction au lancement
canvas = document.getElementById(« nomCanvas »); // declare objet canvas a partir id = nom
if (canvas.getContext){ // la fonction getContext() renvoie True si canvas accessible
contextCanvas = canvas.getContext(« 2d »); // objet context global permettant acces aux fonctions de dessin
// le code graphique ci-dessous
// carre de la taille du canvas
contextCanvas.fillStyle = « rgb(255,255,200) »; // couleur de remplissage rgb 0-255
contextCanvas.fillRect (0, 0, canvas.width, canvas.height); // rectangle
// parametres texte a utiliser
contextCanvas.font = « 10px Verdana »; // police du Canvas
// intervalle de rafraichissement
interval=window.setInterval(draw, 100); // fixe intervalle en ms et fonction a executer
// objet utilisable avec la fonction clearInterval
} // fin si canvas existe
} // fin window.onload
function draw() { // fonction qui est appelee a intervalle regulier
if (contextCanvas!=null) {
// carre de la taille du canvas = efface contenu canva
contextCanvas.fillStyle = « rgb(255,255,200) »; // couleur de remplissage rgb 0-255
contextCanvas.fillRect (0, 0, canvas.width, canvas.height); // rectangle
// trace 1 pixel
contextCanvas.fillStyle = « rgb(0,0,255) »; // couleur de remplissage rgb 0-255
contextCanvas.fillRect (compt,compt, 1,1); // rectangle
contextCanvas.fillStyle = « rgb(0,0,0) »; // couleur remplissage
contextCanvas.fillText(compt.toString()+« , »+compt.toString(), compt, compt); // affiche text
compt=compt+1;
if (compt>canvas.width) compt=0; // RAZ compt si on depasse taille canvas = on efface
} // fin if context !=null
} // fin draw
</script>
<!– Fin du code Javascript –>
</head>
<!– Fin entete –>
<!– Debut Corps de page HTML –>
<body >
<canvas id=« nomCanvas » width=« 300 » height=« 300 »></canvas>
<br />
Exemple utilisation setInterval avec un Canvas
</body>
<!– Fin de corps de page HTML –>
</html>
<!– Fin de la page HTML –>
Articles similaires:
- Javascript : code minimum Javascript dans une page HTML
- Javascript : Canva : Tracé progressif d’une courbe mathématique
- Javascript : Exemple d’affichage d’un « vumètre » graphique simple dans un canva
- Javascript : Graphique Dygraphs : affichage d’une courbe progressive / dynamique
- Javascript : code minimum Javascript dans une page HTML
