Internet regorge de sites pour apprendre le code HTML. L'actualité focalisera notre attention sur les nouveautés, et notamment les possibilités offertes par le HTML 5, et donc...

Un peu de HTML 5

Une page en HTML 5, c'est au minimum cela :

<!DOCTYPE html> <html>   <head>     <title>... mon titre...</title>   </head>   <body>     ... mon contenu...   </body> </html>

Pour commencer, voici un peu de lecture... :

Un peu de pratique

<!----- 1. Placer le Canvas -----> <!DOCTYPE html> <html>   <body>     <canvas style="border:solid 1px;" width="200" height="100">     ...Ce message s'affiche sur les navigateurs incompatibles avec HTML 5...     </canvas>   </body> </html>
Votre navigateur n'est pas compatible avec HTML 5...
<!----- 2. Ecrire un texte ----->    <canvas id="myCanvas" width="200" height="100" style="border:solid 1px;"></canvas>    <script>      var message = "Hello World !!!"       var canvas = document.getElementById('myCanvas');       var context = canvas.getContext('2d');       context.clearRect(0, 0, canvas.width, canvas.height);       context.font = '12pt Verdana';       context.fillStyle = 'black';       context.fillText(message, 10, canvas.height-10);    </script>
Votre navigateur n'est pas compatible avec HTML 5...
<!----- 3. Coordonnées de la souris ----->   <canvas id="myCanvas2" width="200" height="100" style="border:solid 1px;"></canvas>   <script>     var canvas2 = document.getElementById('myCanvas2');     var context2 = canvas2.getContext('2d');     context2.font = '12pt Verdana';     context2.fillStyle = 'black';     canvas2.addEventListener('mousemove', function(evt) {      var rect = canvas2.getBoundingClientRect();        var x=parseInt(evt.clientX - rect.left);       var y=parseInt(evt.clientY - rect.top);        context2.clearRect(0, 0, canvas2.width, canvas2.height);        context2.fillText('x:'+x+' y:'+y, 10, canvas2.height-10);        }, false);    </script> </body>
Déplacer la souris sur le rectangle...
Votre navigateur n'est pas compatible avec HTML 5...
<!----- 4. Objet mobile -----> <canvas id="myCanvas3" width="200" height="100" style="border:solid 1px;"></canvas>       <script>          var canvas3 = document.getElementById('myCanvas3');          var context3 = canvas3.getContext('2d');          context3.font = '12pt Verdana';       canvas3.addEventListener('mousemove', function(evt) {          var rect = canvas3.getBoundingClientRect();          var x=parseInt(evt.clientX - rect.left);          var y=parseInt(evt.clientY - rect.top);          context3.clearRect(0, 0, canvas3.width, canvas3.height);          context3.beginPath();          context3.arc(x, y, 20, 0, 2 * Math.PI, false);          context3.fillStyle = '#aabb00';          context3.fill();          context3.lineWidth = 2;          context3.strokeStyle = '#883300';          context3.stroke();          context3.fillStyle = 'black';          context3.fillText('x:'+x+' y:'+y, 10, canvas3.height-10);          }, false);    </script>
Déplacer la souris sur le rectangle...
Votre navigateur n'est pas compatible avec HTML 5...
<!--- 5. Désactiver la sélection de texte de la page ---> <script> /* ----------------------------------- DESACTIVER LA SELECTION DE TEXTE Ce qui permet de ne pas sélectionner le Canvas si l'on fait un drag sur le Canvas Respecter les sauts de ligne dans le script car ils font partie de la syntaxe ---------------------------------*/ function disableselect(e){return false} function reEnable(){return true} //if IE4+ document.onselectstart=new Function ("return false") //if NS6 if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } </script>
La désactivation de la sélection de texte est utile, non pas pour vous empêcher de copier le code javascript de la page, sinon à quoi bon publier cet article, mais parce que si l'on autorise la sélection de texte, alors le canvas pourra aussi être sélectionné. Or, cela crée une zone colorée sur le canvas, ce qui nuit à son utilisation. Les exemples qui vont suivre utilisant le click de la souris, le script est donc opérationnel sur cette page pour éviter le désagrément de la sélection du Canvas. (Pour faire un copier/coller du code, vous savez faire : clic droit, puis Afficher le code source de la page) La suite bientôt...