oujood.com

HTML canvas attribut width largeur de l'élément canevas

L'attribut width spécifie la largeur de l'élément <canvas>, en pixels

chercher |

Définition et utilisation L'attribut width

LES BALISES HTML

L'attribut width spécifie la largeur de l'élément <canvas>, en pixels.

Astuce : Chaque moment Qu'est re-régler la hauteur ou la largeur d'une zone, le contenu de la toile est effacé (voir exemple en bas de page).

Astuce : Plus d'informations sur l'élément <canvas> dans notre  Tutoriel Canvas HTML5.

Syntaxe

<canvas width ="pixels">

Valeurs d'attribut

Valeur

Description

pixels

Spécifie la largeur de la toile, en pixels (par exemple, "100"). Largeur par défaut est « 300 »

Exemple Un élément <canvas> avec une hauteur et une largeur de 200 pixels :

Exemple :       Copier le code

  <!DOCTYPE html> 
  <html lang="fr"> 
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 
  <title>html5 demo</title>
  </head> 
  <body>
  <canvas id="myCanvas"  width  ="200" height="200" style="border:1px solid">Votre
  navigateur ne prend pas en charge la balise canvas.</canvas>
  <script> 
  var c=document.getElementById("myCanvas"); 
  var ctx=c.getContext("2d"); 
  ctx.fillStyle="#92B901"; 
  ctx.fillRect(50,50,100,100); 
  </body> 
  </html>
 

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut width est pris en charge dans tous les principaux navigateurs.

Remarque : Internet Explorer 8 et versions antérieures, ne supportent pas la balise <canvas>.

Différences entre HTML 4.01 et HTML5

La balise <canvas> est nouveau en HTML5.

Effacer la zone de dessin
Comment faire pour effacer la zone de dessin en utilisant l'attribut width ou height (à l'aide de JavaScript).

Exemple :       Copier le code

  <!DOCTYPE html> 
  <html lang="fr"> 
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 
  <title>html5 demo</title>
  </head> 
  <body>
  <canvas id="myCanvas"  width  ="200" height="200" style="border:1px solid"> Votre
  navigateur ne prend pas en charge la balise canvas.</canvas> 
  <script> 
  var c=document.getElementById("myCanvas"); 
  var ctx=c.getContext("2d"); 
  ctx.fillStyle="#92B901"; 
  ctx.fillRect(50,50,100,100); 
  function clearCanvas() 
  { 
  c. width  =300; 
  } 
  </script>
  <button onclick="clearCanvas()">Clear canvas</button> 
  </body> 
  </html>





Voir aussi nos tutoriel :

CSS border

Définit toutes les propriétés de bordure dans une déclaration

L'Attribut hidden

Spécifie qu'un élément n'est pas encore ou n'est plus, pertinent

fonction stripcslashes, stripcslashes

D code une chaîne encodée avec addcslashes