Médiaforma

Guide de survie – Eléments graphiques et multimédia

Print Friendly, PDF & Email

L’élément audio

Tester le code


<!DOCTYPE HTML>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>L'élément audio</title>
  </head>

  <body>
    <audio controls preload="auto" autobuffer>
      <source src="son.ogg" type="audio/ogg">
      <source src="son.aac" type="audio/aac">
      <source src="son.mp3" type="audio/mp3">
      <source src="son.wav" type="audio/wav">
      <source src="son.aiff" type="audio/aiff">
      <source src="son.au" type="audio/au">
      <a href="son.mp3">Télécharger <cite>le commentaire audio au format mp3</cite></a>
    </audio>
  </body>
</html>

L’élément video

Tester le code


<!DOCTYPE HTML>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>L'élément video</title>
  </head>
  <body>
    <video controls>
      <source src="http://www.mediaforma.com/win7/videx/nettoyage-disque.mp4" type="video/mp4" />
      <source src="http://www.mediaforma.com/win7/videx/nettoyage-disque.ogg" type="video/ogg" />
      <object width="800" height="600" type="application/x-shockwave-flash" data="http://www.mediaforma.com/win7/videx/nettoyage-disque.swf">
        <param name="movie" value="http://www.mediaforma.com/win7/videx/nettoyage-disque.ogg" />
        <param name="flashvars" value="controlbar=over&image=http://www.mediaforma.com/win7/videx/nettoyer-disque.jpg&file=http://www.mediaforma.com/win7/videx/nettoyage-disque.mp4" type="video/mp4" />
        <img src="http://www.mediaforma.com/win7/videx/nettoyer-disque.jpg" width="640" height="360" alt="Nettoyage du disque"
           title="Le navigateur ne supporte pas la balise ≶video>. Téléchargez la vidéo en cliquant sur le lien ci-dessous" />
      </object>
      <p><a href="http://www.mediaforma.com/win7/videx/nettoyage-disque.mp4">Télécharger la vidéo</a>.</p>
    </video>
  </body>
</html>

L’élément canvas

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>L'élément canvas</title>
    <script>
      function init()
      {
        var elem = document.getElementById('cannevas');
        if (!elem)
        {
          return;
        }

        var context = elem.getContext('2d');
        if (!context)
        {
          return;
        }
        context.fillStyle = '#ff0 ';
        context.fillRect(0, 0, 150, 100);
      }
    </script>
  </head>

  <body onload="init();">
    <canvas id="cannevas" width="400" height="250">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
  </body>
</html>

Les méthodes de tracé 2D dans un canevas

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Tracé 2D dans un cannevas</title>
    <script>
      function trace1()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.fillStyle = '#f00 ';
        context.fillRect(10,10,150,150);
      }
      function trace2()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.lineWidth = 1;
        context.strokeStyle = '#00f ';
        context.strokeRect(10,10,150,150);
      }
      function trace3()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.fillStyle = '#f00 ';
        context.fillRect(10,10,150,150);
        context.clearRect(20,20,100,60);
      }
      function trace4()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.strokeStyle = '#00f';
        context.lineWidth = 10;
        context.lineCap = 'round';
        context.lineJoin = 'round';
        context.beginPath();
        context.moveTo(30,30);
        context.lineTo(130,50);
        context.lineTo(90,110);
        context.lineTo(70,30);
        context.lineTo(35,130);
        context.closePath();
        context.stroke();
      }
      function trace5()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.strokeStyle = '#00f';
        context.lineWidth = 5;
        context.lineCap = 'round';
        context.lineJoin = 'round';
        context.beginPath();
        context.moveTo(30,30);
        context.rect(30,30,130,130);
        context.stroke();
      }
      function trace6()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.strokeStyle = '#00f';
        context.lineWidth = 10;
        context.lineCap = 'round';
        context.lineJoin = 'round';
        context.beginPath();
        context.moveTo(30,30);
        context.lineTo(130,50);
        context.lineTo(90,110);
        context.lineTo(70,30);
        context.lineTo(35,130);
        context.closePath();
        context.fill();
      }
      function trace7()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.fillStyle = '#00f';
        context.beginPath();
        context.arc(80,80,60,0,2*Math.PI, false);
        context.fill();
      }
      function trace8()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.fillStyle = '#0f0';
        context.beginPath();
        context.arc(80,80,60,0,Math.PI, false);
        context.fill();
      }
      function trace9()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.linewidth = 10;
        context.beginPath();
        context.moveTo(20,20);
        context.bezierCurveTo(20,100, 90,10, 150, 150);
        context.stroke();
      }
      function trace10()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.linewidth = 10;
        context.beginPath();
        context.moveTo(20,20);
        context.quadraticCurveTo(20,100, 150, 150);
        context.stroke();
      }
    </script>
  </head>

  <body>
    <canvas id="cannevas" width="200" height="190" style="border: dotted;">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
    <br>
    <button onclick="trace1()">Carré rouge</button>
    <button onclick="trace2()">Carré vide à bordure bleue</button>
    <button onclick="trace3()">Effacement d'une zone rectangulaire</button>
    <button onclick="trace4()">Tracé d'un chemin</button>
    <button onclick="trace5()">Tracé rectangulaire</button>
    <button onclick="trace6()">Remplissage d'un chemin</button>
    <button onclick="trace7()">Cercle bleu</button>
    <button onclick="trace8()">Arc de cercle vert</button>
    <button onclick="trace9()">Courbe de Bézier</button>
    <button onclick="trace10()">Courbe quadratique</button>
  </body>
</html>

Des images dans un canevas

Exemple 1

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des images dans un cannevas</title>
    <script>
      function init()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        var img = new Image();
        img.onload = function()
        {
          context.drawImage(img,0,0);
        }
        img.src = 'fbas.png';
      }
    </script>
  </head>

  <body onload="init();">
    <canvas id="cannevas" width="250" height="200" style="border: dotted;">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
  </body>
</html>

Exemple 2

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des images dans un cannevas</title>
    <script>
      function init()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        img.onload = function()
        {
          for (var i=0;i<3;i++)
          {
           for (var j=0;j<2;j++)
           {
           context.drawImage(img,j*50,i*38,50,38);
           }
          }
        }
        img.src = 'fbas.png';
      }
    </script>
  </head>

  <body onload="init();">
    <canvas id="cannevas" width="250" height="200" style="border: dotted;">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
  </body>
</html>

Exemple 3

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des images dans un cannevas</title>
    <script>
      function init()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.drawImage(document.getElementById('cadre'), 0, 0)
        context.drawImage(document.getElementById('image'), 100, 300, 400, 400, 50, 40, 300, 370);
      }
    </script>
  </head>

  <body onload="init();">
    Résultat :<br>
    <canvas id="cannevas" width="400" height="440">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
    <br>A partir de ces images :<br>
    <img src="cadre.png" id="cadre" width="200" height="300">
    <img src="elephant.jpg" id="image" width="170" height="270">
  </body>
</html>

Du texte dans un canevas

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Du texte dans un cannevas</title>
    <script>
      function init()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.fillStyle = '#f0f';
        context.font = 'italic 30px Algerian';
        context.textBaseline = 'top';
        context.fillText ('Un simple texte', 0, 0);
        context.strokeStyle = '#0f0';
        context.font = 'bold 30px Algerian';
        context.strokeText('Un simple texte', 0, 50);
      }
    </script>
  </head>

  <body onload="init();">
    <canvas id="cannevas" width="350" height="200" style="border: dotted;">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
  </body>
</html>

Des effets spéciaux dans un canevas

Tester le code


Transformations
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Transformations dans un cannevas</title>
    <script>
      function trace1()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        var gradienthoriz = context.createLinearGradient(0, 0, 300, 0);
        gradienthoriz.addColorStop(0,"white");
        gradienthoriz.addColorStop(0.5,"red");
        context.clearRect(0,0,190,190);
        context.fillStyle = gradienthoriz;
        context.fillRect(10,10,150, 150);
      }
      function trace2()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,190,190);
        context.fillStyle = "red";
        context.shadowOffsetX = 5;
        context.shadowOffsetY = 5;
        context.shadowBlur = 4;
        context.shadowColor = 'rgba(255, 0, 0, 0.5)';
        context.fillRect(10,10,150, 150);
      }
      function trace3()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,190,190);
        var img = new Image();
        img.src = 'fbas.png';
        context.drawImage(img,0,0);
        context.fillStyle = 'rgba(255, 0, 0, 0.5)';
        context.fillRect(10,10,150,150);
      }
      function trace4()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,190,190);
        var img = new Image();
        img.src = 'fbas.png';
        context.rotate(45 * Math.PI / 180);
        context.drawImage(img,60,-100);
      }
    </script>
  </head>
  <body>
    <canvas id="cannevas" width="200" height="190" style="border: dotted;">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
    <br>
    <button onclick="trace1()">Gradient</button>
    <button onclick="trace2()">Ombre portée</button>
    <button onclick="trace3()">Transparence</button>
    <button onclick="trace4()">Transformation</button>
  </body>
</html>

Graphiques vectoriels SVG

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Utilisation d'un fichier SVG</title>
  </head>
  <body>
    <object type="image/svg+xml" data="departements.svg" width="800" height="600">
      <p>Votre navigateur ne supporte pas le SVG.</p>
    </object>
  </body>
</html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg>
  ...
  <path id="dp11" fill="#ffffff" d="M 274,438 L 273,442 L 270,440 L 266,440 L 266,439 L 264,439 L 260,441 L 259,438 L 256,441 L 257,443 L 254,444 L 253,447 L 251,448 L 253,451 L 252,452 L 262,457 L 263,464 L 263,467 L 264,472 L 259,472 L 257,474 L 264,479 L 267,477 L 272,482 L 271,483 L 272,483 L 280,479 L 278,476 L 278,473 L 296,473 L 296,470 L 300,468 L 305,472 L 308,473 L 307,468 L 308,461 L 305,461 L 303,458 L 305,456 L 308,459 L 311,457 L 313,455 L 313,453 L 311,453 L 310,450 L 307,450 L 305,446 L 303,446 L 301,445 L 301,442 L 300,443 L 300,445 L 298,445 L 298,448 L 294,450 L 292,446 L 290,447 L 288,446 L 287,443 L 288,441 L 288,439 L 287,439 L 281,439 L 275,438 L 274,438 z " />
  ...
  <text x="549" y="523" id="tp0">2a</text>
  <text x="557" y="483" id="tp20">2b</text>
  ...
</svg>

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

Bonjour, Je n’ai aucun texte qui apparait dans le canvas je ne comprends pas pourquoi pouvez vous m’aider ? (le rectangle lui est dessiné)

function init(){

var elem = document.getElementById( 'myCanvas' );
var context = elem.getContext( '2d' );

context.fillStyle = '#ef8846';
context.fillRect( 0, 0, 10, 10 );

context.fillStyle = '#050614';
context.font = 'italic 30px Arial';
context.filltext ( 'un texte simple', 0, 0);
};

Votre navigateur ne supporte pas le HTML5