Comment puis-je écrire du texte sur un élément de toile HTML5?

Question

Est-il possible d'écrire du texte sur HTML5 canvas ?

Answer 1

<canvas id="e" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("e");
  var context = canvas.getContext("2d");
  context.fillStyle = "blue";
  context.font = "bold 16px Arial";
  context.fillText("Zibri", 100, 100);
</script>

Answer 2

Voici comment dessiner du texte sur/à l’aide de toile :

Le balisage...

et le script (avec quelques options différentes)...

Commander la documentation de la MDN et mon JSFiddle.

Answer 3

La prise en charge du texte Canvas est en fait très bonne: vous pouvez contrôler la police, la taille, la couleur, l'alignement horizontal et l'alignement vertical. Vous pouvez également obtenir des métriques de texte pour obtenir la largeur du texte en pixels. De plus, vous pouvez également utiliser des transformations de canevas pour faire pivoter, étirer et même inverser du texte.

Answer 4

Il est très facile d'écrire du texte sur une toile. Il n'était pas clair si vous voulez quelqu'un pour entrer du texte dans la page HTML, et alors que le texte s'affiche sur la toile, ou si vous allez utiliser JavaScript pour écrire les informations à l'écran.

Le code suivant va écrire un texte dans différentes polices de caractères et les formats de votre toile. Vous pouvez modifier ce que vous souhaitez tester d'autres aspects de l'écriture sur une toile.

 <canvas id="YourCanvasNameHere" width="500" height="500">Canvas not supported</canvas>

 var c = document.getElementById('YourCanvasNameHere');
 var context = c.getContext('2d'); //returns drawing functions to allow the user to draw on the canvas with graphic tools. 

Vous pouvez soit placer la toile ID dans la balise HTML et ensuite de référence, le nom ou vous pouvez créer la toile dans le code JavaScript. Je pense que pour la plupart, je vois l' <canvas> balise dans le code HTML et à l'occasion de la voir créé dynamiquement dans le code JavaScript lui-même.

Code:

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.font = 'bold 10pt Calibri';
  context.fillText('Hello World!', 150, 100);
  context.font = 'italic 40pt Times Roman';
  context.fillStyle = 'blue';
  context.fillText('Hello World!', 200, 150);
  context.font = '60pt Calibri';
  context.lineWidth = 4;
  context.strokeStyle = 'blue';
  context.strokeText('Hello World!', 70, 70);

Answer 5

Cela dépend de ce que vous voulez en faire, je suppose. Si vous voulez juste écrire du texte normal, vous pouvez utiliser .fillText ()