Retourner à la page d'accueil de TJS

Propriété : CanvasRenderingContext2D.textBaseline

Compatible Internet Explorer / Edge  Compatible Chrome  Compatible Safari  Compatible Firefox  Compatible Opera  

Contient le mode d'affichage de la ligne de base des textes dans le canvas


Description
Contient le mode d'affichage de la ligne d'appui des textes dans le canvas.

Par défaut, la valeur est alphabetic

Les autres valeurs possibles sont
middle
bottom
top

Voir l'exemple pour comprendre les différents alignements


Exemple Les différentes lignes d'appui des textes
Code source
<canvas id="myCanvas" width="300" height="300" style="background-color:#fff"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");
myContext.font="20px arial";
myContext.strokeStyle="#a00";
myContext.lineWidth=1;
myContext.fillStyle="#31528C";

var delta=50;
var values=["alphabetic", "middle", "top", "hanging", "bottom"]
for (var i=0; i<values.length; i++) {
 console.log(i+" "+values[i]);
 myContext.textBaseline=values[i];
 myContext.fillText("Ligne d'appui "+values[i], 20, delta*(i+1));
 myContext.beginPath();
 myContext.moveTo(10, delta*(i+1));
 myContext.lineTo(290, delta*(i+1));
 myContext.stroke();
}
</script>

Résultat
Emulation de la console
Explication
Utilise le tableau des possibilités pour afficher la ligne d'appui

Page en rapport
Le tutoriel sur le dessin avec canvas
Page mise à jour le

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...
Le 18/09/2019 09:42:44 sur php7 en 26.33 ms