Lionel's HTML5

ALors la, je viens de faire une percer! Je suis le premier gars de 18 ans a faire une animation en HTML5, la derniere techlogie pour internet! Si l'animation ne s'affiche pas c'est votre Navigateur n'est pas fait encore pour le HTML5, mon animation devrait vous dire quel version de votre Navigateur web vous devriez avoir pour le HTML5.

Je n'ai eu que d'autre choix que de le publié via Piczo. Alors les bulles de couleurs qui se promene n'est pas une animation flash, ni un gif animé, C'EST DU HTML5!!! La nouvelle technologie d'animation!

Voici le code HTML pour cette animation en HTML5:

Spoiler:

Code:: <html>
<head>
<title>Zack HTML5</title>
</head>
<body bgcolor="#000000">
<div>
<canvas id="canvas" width="800" height="900">
Votre navigateur ne supporte pas le HTML5. 
Veuillez réessayer avec Google Chrome 6, Mozilla Firefox 3.6.10 ou Internet Explorer 9 
Your browser doesn't support HTML5. 
Please try again with google Chrome 6, Mozilla Firefox 3.6.10 or Internet Explorer 9
</canvas>
</div>





<script type="text/javascript">
var canvas;
var ctx;
var x = 100;
var y = 10;
var x2 = 300;
var y2 = 60;
var dx = 2;
var dx2 = 2;
var dy = 4;
var dy2 = 4;
var WIDTH = 800;
var HEIGHT = 900;

function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.fill();
}

function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}

function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 10);
}

function draw() {
clear();
ctx.fillStyle = "#222222";
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#00FF00";
circle(x, y, 200);
ctx.fillStyle = "#000000";
circle(x2, y2, 175);
ctx.fillStyle = "#0000FF";
circle(x2,WIDTH - y2, 150);
ctx.fillStyle = "#009000";
circle(x,WIDTH - y, 125);
ctx.fillStyle = "#000088";
circle(HEIGHT - x,y, 100);
ctx.fillStyle = "#FF0000";
circle(WIDTH - x2,y2, 80);
if (x + dx > WIDTH || x + dx < 0)
dx = -dx;
if (y + dy > HEIGHT || y + dy < 0)
dy = -dy;
x += dx;
y += dy / Math.PI;

if (x2 + dx2 > WIDTH || x2 + dx2 < 0)
dx2 = -dx2;

if (y2 + dy2 > HEIGHT || y2 + dy2 < 0)
dy2 = -dy2;
x2 += dx2;
y2 += dy2 / Math.PI;
}
function position()
{
document.getElementById("color").innerHTML="Red Circle" + " Refresh = 100ms";
document.getElementById("circle").innerHTML="x = "+(HEIGHT - x2);
document.getElementById("circle2").innerHTML="y = "+parseInt(WIDTH - y2);
setTimeout("position()",100);

}

init();
position();
</script>

</body>
</html>