exemple d'utilisation de SVG & canvas pour Firefox 1.5
Une des nouveautés de Firefox 1.5 est,
entre autre, le support du SVG et de la balise <canvas>.
SVG
SVG veut dire Scalable Vector Graphics cela permet de faire du vectoriel avec du XML :-)
Par exemple ce bout de XML la donnera :
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="300" height="250"
style="fill:none;stroke:blue;stroke-width:2"/>
<ellipse cx="160" cy="70" rx="40" ry="30"
style="fill:yellow;stroke:navy;stroke-width:3"/>
<g transform="translate(0, 120) rotate(30, 160, 60)">
<ellipse cx="160" cy="70" rx="70" ry="30"
style="fill:none;stroke:purple;stroke-width:3"/>
</g>
</svg>
la ou ca devient encore plus sympathique c'est qu'on peut manipuler ces images avec javascript grace à DOM ! Voici quelques exemples :
http://www.croczilla.com/svg/samples/ (qui marcheront seulement avec FF1.5 ou safari)
Je ne sais pas si un jour IE va pouvoir nativement afficher ces choses la (ce serait cool) si quelqu'un à des idées la dessus ... :p
Canvas
La balise canvas est une des balise proposé par le
WHATWG (
et je maintiens mon avis) cette balise permet de faire du dessin trés facilement avec javascript :-)
<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 50, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 50, 50);
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
J'aime bien l'idée de cette balise: pouvoir dessiner avec du js : QDB. le problème est que ca ma l'air d'aller à l'encontre du W3C et je doute trés fortement que IE va implémenter ces balises ... :-( si ce "standard", certe sympa, s'impose on risque de retomber dans une nouvelle guerre des navigateurs : c'est celui qui met le plus de fonctionnalités (souvent inutile) qui sera perçu comme le meilleur des navigateurs ...
En tout cas en voyant ca, j'ai vraiment hâte de faire du XAML :)
PS : J'ai aussi découvert une autre nouveauté (moins documenté) de Firefox1.5, c'est le support des propriétés overflow-x et overflow-y introduite par microsoft qui permettent d'afficher une barre de scroll seulement en bas ou à droite. Avant Firefox 1.5 il était impossible de spécifier quelle scrollbar voulait ton afficher, pour information cette propriété n'est nullement décrite dans les normes W3C ... ;-)