Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

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 :
 
rendu du SVG
<?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 :-)
 
Voici un exemple tiré de : http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas 
<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 ...
 
Voici d'autres exemples de <canvas> / SVG : http://thebogles.com/blog/firefox-15-svg-and-canvas-demonstrations 
 
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 ... ;-)
Posted: dimanche 5 février 2006 23:53 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

Poppyto a dit :

VBScript permet aussi de faire du dessin sur IE.

Bonne nouvelle pour overflow-x & overflow-y (enfin!) !
# février 6, 2006 09:21

azra a dit :

Hep Msieur, comment je fais pour mon firefox avant 1.5 pour mon overflow? :)
# février 6, 2006 11:09

ROMELARD Fabrice a dit :

Tu as un petit exemple rapide ici :
- http://www.asp-php.net/scripts/asp-php/generer_svg.php

Romelard Fabrice
# février 6, 2006 11:38
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Evénement monfial Global Azure Bootcamp (10 000 participants) Venez !! par Blog de Vincent THAVONEKHAM, Objet Direct le 01-25-2015, 16:29

- Mon Blog déplacé vers une version anglaise... www.thavo.com par Blog de Vincent THAVONEKHAM, Objet Direct le 01-25-2015, 16:25

- Localisation et globalisation ne sont pas des options par Blog de Jérémy Jeanson le 01-17-2015, 11:47

- [Clean Code] les commentaires… par Fathi Bellahcene le 01-10-2015, 17:17

- Mise à jour de Test Professional 2013 par Blog de Jérémy Jeanson le 01-10-2015, 11:32

- [Dynamics CRM] Ajouter un bouton pour déclencher un workflow ou un script (dialogue) par Christine Dubois le 01-09-2015, 14:03

- RDV aux #SharePoint Days 2015 à Casablanca les 28 et 29 janvier ! par Le blog de Patrick [MVP Office 365] le 01-06-2015, 08:41

- TFS Online, vous allez aimer vos projets par Blog de Jérémy Jeanson le 01-03-2015, 11:19

- Bon code 2015 ! par Blog de Jérémy Jeanson le 01-02-2015, 19:01

- [Dynamics CRM] Créer un contact à partir d’une signature email par Christine Dubois le 12-30-2014, 14:37