Les couleurs et les lignes en PHP GD
Définition et utilisation L'attribut height
LES BALISES HTMLL'attribut height spécifie la hauteur 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).
Plus d'informations sur l'élément <canvas> dans notre Tutoriel Canvas HTML5.
Syntaxe
<canvas height="pixels">
Valeurs d'attribut
|
Valeur |
Description |
|---|---|
|
pixels |
Spécifie la hauteur de la toile, en pixels (par exemple, "100"). hauteur par défaut est « 150 » |
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);
</script>
</body>
</html>
Appui de navigateur
L'attribut height 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.height=300;
}
</script>
<button onclick="clearCanvas()">Clear canvas</button>
</body>
</html>
Retour à la balise canvas
Retour à l'accueil du site
Par carabde 10 mars 2014