Easy-Micro


LANGAGE HTML5 CANVAS
Animation

Animation de canvas HTML5

HTML5 Animation de canvas : mouvement linéaire

La méthode requestAnimFrame permet de synchroniser l'affichage dans le canvas avec le moteur graphique du navigateur. La fonction callback est appelée régulièrement (toutes les 60ms) par la fonction setTimeout. Exemple :



Voici le code :
<canvas id="monCanvas" style="width:100%; height:100px; border: 1px dotted #0000ff;" ></canvas>

<script type="text/javascript">
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})(); // sinon null

// Création du rectangle
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black'; context.stroke();
}

function animate(myRectangle, canvas, context, startTime) {
// update
var time = (new Date()).getTime() - startTime;

var linearSpeed = 100; // vitesse de déplacement
// pixels / second
var newX = linearSpeed * time / 1000;

if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
myRectangle.x = newX;
}

// clear
context.clearRect(0, 0, canvas.width, canvas.height);

drawRectangle(myRectangle, context);

// request new frame
requestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
var canvas = document.getElementById('monCanvas'); // appel du canvas
var context = canvas.getContext('2d');

var myRectangle = { x: 0, y: 75, width: 100, height: 50, borderWidth: 5};
drawRectangle(myRectangle, context);

// délai d'une seconde avant anim
setTimeout(function() {
var startTime = (new Date()).getTime();
animate(myRectangle, canvas, context, startTime);
}, 1000);
</script>



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mercredi 20 mars 2019 - Semaine 12 - Saint Herbert (Demain: Sainte Clémence)
Aujourd'hui, c'est l'anniversaire de Danièle Gilbert (1943-76 ans), animatrice de télévision française et de Marthe Villalonga (1932), actrice française. Autre 20 mars: 1815 : de retour de l'île d'Elbe et après une marche triomphale sur Paris, Napoléon entre dans la capitale. 1965 : France Gall gagne l'Eurovision pour le Luxembourg avec Poupée de cire poupée de son.
Haut de page Easy-Micro