Bonjour,

J'ai essayé les fonctions d'animation de HTML 5 : un petit rectangle qui se déplace de droite à gauche dans un canvas.

Le code suivant fonctionne parfaitement sous Firefox et Chrome :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE HTML>
<html>
<head>
	<title>Test d'animation en HTML 5</title>
	<style  type="text/css">
		canvas.borderLine {
			border-style: solid;
			border-width: 1px;
			border-color: black;
		}
	</style>
	<script type="text/javascript">
		var xPos;
		var rwContext;
		var previousTime;
 
		function init() {
			window.requestAnimationFrame =
					window.requestAnimationFrame
					|| window.mozRequestAnimationFrame
					|| window.webkitRequestAnimationFrame
					|| window.msRequestAnimationFrame;
			xPos = -60;
			var rwCanvas = document.getElementById("renderWindow");
			rwContext = rwCanvas.getContext("2d");
		}
 
		function render(thisTime) {
			var elapsedTime = thisTime - previousTime;
			xPos = (xPos + elapsedTime * 0.3) % 600;
			rwContext.clearRect(0, 0, 600, 400);
			rwContext.fillRect(xPos, 60, 60, 60);
			previousTime = thisTime;
			window.requestAnimationFrame(render);
		}
 
		function start() {
			init();
			window.requestAnimationFrame(function(thisTime) {
				previousTime = thisTime;
				render(thisTime);
			});
		}
	</script>
</head>
<body onload="start()">
	<canvas id="renderWindow" width="600" height="400" class="borderLine" />
</body>
</html>
En revanche, il ne se passe rien sous IE 9. J'ai ouvert le debogueur et il dit :
"SCRIPT5007: Objet attendu
testAnimation.html, Ligne 39 Caractère 4"
(C'est la ligne "scheduleFrame(function(thisTime) {" dans la fonction start.)

J'ai essayé plusieurs variantes, sans résultat. Quelqu'un sait il ce qui se passe?

Merci d'avance,

BugFactory