Compare en binaire des chaînes de caractères
Définition et utilisation L'attribut width
LES BALISES HTMLL'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
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>
|
Retour à la balise canvas
Retour à l'accueil du site Par carabde 10 mars 2014 |