<html><head><title>Ecrire du texte dans les canvas</title></head><body><h1>Ecrire du texte dans les canvas</h1><p>Un canvas de 300*300 avec du texte</p><div class="dessin"> <canvas id="myCanvas" width="300" height="300"></canvas></div><script type="text/javascript">var myCanvas=document.querySelector("#myCanvas");var myContext=myCanvas.getContext("2d");myContext.font="20px arial";myContext.font="bold italic 20px verdana";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++) { myContext.textBaseline=values[i]; var txt="Ligne d'appui \""+values[i]+"\""; myContext.fillText(txt, 20, delta*(i+1)); drawPoint(myContext, 20, delta*(i+1), "#f00"); drawLine(myContext, 10, delta*(i+1), 290, delta*(i+1), "#f00"); console.log("largeur de '"+txt+"'="+myContext.measureText(txt).width+" px");}/* Fonction de dessin d'une ligne entre (x1,y1) et (x2,y2) */function drawLine(ctx, x1, y1, x2, y2) { ctx.beginPath(); /* 1er trait de la croix */ ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();}/* Fonction de dessin d'un point sous forme de croix */function drawPoint(ctx, x, y, color) { ctx.save(); /* Sauvegarde du style avant l'appel */ ctx.lineWidth=2; ctx.strokeStyle=color; ctx.setLineDash([]); drawLine(ctx, x-5, y-5, x+5, y+5); drawLine(ctx, x-5, y+5, x+5, y-5); ctx.restore(); /* Le style d'avant l'appel est restauré */}</script><style type="text/css"> div.dessin { background: #fff; padding:5px; text-align: center; }</style></body></html>
Edition 1 | Chapitre 19 : Le dessin et les canvas / Page 258
Edition 2 | Chapitre 20 : Le dessin et les canvas / Page 280
Edition 3 | Chapitre 20 : Le dessin et les canvas / Page 280
En savoir plus
