HTML5 Canvas : premier exemple

Les Canvas sont sans doute l’ une des nouveautés les plus spectaculaires d’ HTML5 . Les canvas permettent de définir une zone graphique sur une page . La manipulation des Canvas s’ effectue avec le bon vieux javascript !!! Je suis vraiment impatient de découvrir toutes les possibilités offertes par les Canvas ( la création de mini-jeux est notamment bien motivante !!! ) .
Voici pour commencer un petit exemple très basique : le dessin d’ un rectangle dans un Canvas .

<!DOCTYPE html>
<html>
<head><title>mon premier canvas</title></head>
<body>
<h1>mon premier canvas</h1>
<canvas id="premierCanvas" width="200" height="200" style="border: 1px solid #000;"></canvas>
<script type="application/javascript">
// on récupère le canvas dans une variable
var canvas = document.getElementById('premierCanvas');
// on récupère le contexte 2d du canvas , on pourra ainsi accéder à l' API pour manipuler le canvas
var ctx = canvas.getContext('2d');
// on choisit la couleur de notre futur rectangle
ctx.fillStyle = "#00FF52";
// on dessine un rectangle
ctx.fillRect(25,50,100,25) // (positionX,positionY,largeur,hauteur)
</script>
</body>
</html>

voici le résultat de notre premier exemple de Canvas !!!


Voir l’ exemple dans une page html

Quelques remarques :

  • en HTML5 la déclaration du DOCTYPE a été vraiment simplifiée !!!
  • nous verrons dans un prochain billet comment gérer les méchants navigateurs qui ne supportent pas les Canvas
Publié dans Canvas, HTML5

quand j’aurai le temps

  • les filtres wordpress
  • plugin wordpress et enregistrement de données
  • les wordpress custom post type
  • la bdd d'un blog wordpress
  • la balise more de wp
  • personnaliser une galerie wp
  • gérer les longueurs des extraits de wp
  • les animations css3
  • le memento symphony2
  • le squelette d'une page html5
  • liste sur plusieurs colonnes
  • le responsive design
  • exemple d'un jeu basique en html5
  • la réplication des bases de données
  • mettre en place une architecture en silo avec wp
  • parser un fichier xml (donc un rss) avec php5
  • mettre en place lightbox sans plugin
  • améliorer les performances de son wp
  • ajouter un bouton à l'éditeur de texte de wp
  • ...