Propriété : CanvasRenderingContext2D.textBaseline

<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>

Emulation de la console

Utilise le tableau des possibilités pour afficher la ligne d'appui

Dunod Fnac Amazon

Chargement
en cours...