<canvas id ="canv56"
width ="300"
height =
"150">
votre navigateur n'accepte pas Canvas
</canvas>
<script>
var canv56 =
document.getElementById('canv56');
var context56 = canv56.getContext('2d');
// mise en
place de la fonction window.requestAnimFrame () selon le modèle
ci-dessus)
var diametreBalle =
15;
var posX =
10 + diametreBalle/2;
var posY =
5 + diametreBalle/2;
var vitesseX =
3;
var vitesseY =
3;
function animate(){
context56.clearRect(0,
0, canv56.width, canv56.height);
//efface tout
context56.beginPath();
context56.arc(posX, posY, diametreBalle/2,
0, Math.PI*2);
//Dessin de la balle
context56.fill();
//Vérification pour savoir si la balle à touché
un bord
if(posX+diametreBalle/2
>= canv56.width || posX <= 0+diametreBalle/2){
vitesseX *= -1;
if(posY+diametreBalle/2 >= canv56.height ||
posY <= 0+diametreBalle/2){
vitesseY *=
-1;
}
posX +=
vitesseX;
//Modification de la position X puis Y
posY +=
vitesseY;
//Calcul du temps pour afficher 60images/seconde
window.requestAnimFrame(function() {
animate() });
}
animate();
</script> |
|