Valeur de cette activité : 10 points
Compétence :
40- La balise CANVAS et le javascript

A-Module 04 : JAVASCRIPT : 10 points - difficulté : 2

La balise CANVAS et le javascript

Présentation

Canvas est un objet HTML servant au dessin de graphiques qui utilisent des scripts (habituellement en JavaScript). Il peut être utilisé par exemple pour le dessin de graphes, créer des compositions de photos ou d'animations et pour la création de jeux.

La balise canvas est une extension non standard à la norme HTML qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts.

Introduite à l'origine par Apple pour être utilisé dans le composant WebKit pour Mac OS X, pour faire fonctionner des logiciels comme Dashboard et le navigateur Safari, elle a été par la suite adoptée par les navigateurs utilisant Gecko (notamment Mozilla Firefox) et Opera puis standardisée par le groupe de travail WHATWG comme une proposition à introduire dans la nouvelle génération des technologies web. Novell a développé une extension activant les XForms dans Internet Explorer[1] et offrant ainsi une prise en charge des fonctionnalités de Canvas.

Canvas se résume en une région de dessin dont la hauteur et la largeur sont définies dans du code HTML. Du code Javascript permet d'accéder à l'aire via une série complète de fonctions de dessins, similaires aux autres API 2D, bien que permettant de générer dynamiquement des graphismes. Certaines personnes ont anticipé cet emploi de Canvas en l'utilisant pour des graphiques, des animations et de la création d'images.

Pour en savoir plus...

ATTENTION : votre navigateur doit supporter le HTML 5 (cliquez ICI pour tester votre navigateur ).

Exemple d'animation utilisant la balise Canvas


Consultez le site http://www.crunchzilla.com/code-maven pour jouer un peu!

Affichez ce site afin de voir les possibilités d'utilisation de la balise canvas.


  1. Ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 55482
  2. Inscrivez dans le champ titre : La balise CANVAS et le javascript
  3. Sélectionnez la section : MODULE JAVASCRIPT
  4. Sélectionnez la matière : informatique
  5. Inscrivez dans le champ no de la directive : 55482
  6. Inscrivez dans votre page le titre de niveau 1 : La balise CANVAS et le javascript
  7. utilisez au besoin un des sites suivants :
    1. html 5 canvas tutorials
    2. w3schools (suggéré)
    3. http://www.html5canvastutorials.com/tutorials/html5-canvas-element/
    4. http://diveintohtml5.info/canvas.html
    5. Google en indiquant les mots ... "HTML balise canvas"
    6. la liste de tutoriels disponibles ici
    7. http://www.patrickcleder.com/tuto_22.php
    8. http://www.tutorialized.com/view/tutorial/Using-the-Canvas-Element-in-HTML5/68057


    Insérez ensuite dans votre page un exemple d'utilisation de cette balise afin de créer un canevas:
    - de dimension 1000x1000
    - ayant un arrière-plan de couleur de votre choix
    - contenant un texte d'une autre couleur
    - et une image
    - et un dégradé de couleur sur un cercle 

    AIDE : 
    

    1) Insérer une image :
    


    Méthode 1 :
    

 var cat = new Image();
  cat.src = "https://chene-bleu.info/i/ladifference/logoldas.png";
  cat.onload = function() {
    ctx.drawImage(cat, 0, 0,100,100);
  };
 

signification des paramètres : nom de la variable image,position en x, position en y, hauteur,largeur


    Métohde 2 : 
    

Insérez une image dans la section html de votre page

Ajoutez le paramètre id="i"  et le paramètre de style style="display:none;" à votre image (html) 

ensuite ajoutez dans le bloc de script
 
 
var img = document.getElementById("i");
ctx.drawImage(i,10,10,150,150); 



signification des paramètres : id de l'image,position en x, position en y, hauteur,largeur
  8. Visualisez votre page et apportez des modifications au besoin.