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


150

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


1
Je recommanderais de lire le site <a href=" diveintohtml5.info/"> diveintohtml5 </ a >, il a son propre <a href=" diveintohtml5.info/canvas.html#text"> chapitre sur text</a> . C'est une très bonne lecture.
chelmertz

En plus des autres réponses, si vous souhaitez écrire du texte à l'aide d' excanvas (pour la prise en charge d'IE), vous aurez besoin d'un script supplémentaire, disponible ici: code.google.com/p/explorercanvas/issues/detail?id=6 Le téléchargement par défaut ( code.google.com/p/explorercanvas/downloads/list ) n'inclut pas les méthodes fillText et strokeText.
Castrohenge le

2
@IvanCastellanos Avez-vous trouvé des résultats de recherche pertinents? Il peut être utile de les publier ici, si vous en trouvez.
Anderson Green

2
@IvanCastellanos - cette question (pour moi du moins) vient maintenant en haut pour "HTML canvas text" sur Google. N'est-ce pas le but de Stack Overflow?
colincameron

Oui, c'est facile de le faire sur Canvas. J'ajouterais plus à votre message afin que vous puissiez montrer quelques exemples de ce que vous avez essayé et de ce que vous n'avez pas essayé. Juste la question n'est pas vraiment bénéfique pour Stackoverflow.com
Doug Hauf

Réponses:


234

var canvas = document.getElementById("my-canvas");
var context = canvas.getContext("2d");

context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8);
#my-canvas {
  background: #FF0;
}
<canvas id="my-canvas" width="200" height="120"></canvas>


3
Existe-t-il un moyen d'obtenir la largeur et la taille de la police pour pouvoir la centrer? (Contenu dynamique)
Oliver Dixon

1
supposons: votre toile width-200, height: 100 horizontal : ctx.textAlign = 'center' ctx.fillText ('Hello', 100 , 10) vertical : ctx.textBaseline = 'middle' ctx.fillText ('Hello', 10) , 50 )
1616

Documentation:fillText
jpaugh

7

Dessiner du texte sur une toile

Balisage:

<canvas id="myCanvas" width="300" height="150"></canvas>

Script (avec quelques options différentes):

<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.font = 'italic 18px Arial';
    ctx.textAlign = 'center';
    ctx. textBaseline = 'middle';
    ctx.fillStyle = 'red';  // a color name or by using rgb/rgba/hex values
    ctx.fillText('Hello World!', 150, 50); // text and position
</script>

Consultez la documentation MDN et cet exemple JSFiddle .


6

Canvassupport de texte est en fait assez bonne - vous pouvez contrôler font, size, color, horizontal alignment, vertical alignmentet vous pouvez également obtenir des mesures de texte pour obtenir la largeur du texte en pixels. En outre, vous pouvez également utiliser la toile transformspour rotate, stretchet même inverttexte.


5

Il est vraiment facile d'écrire du texte sur une toile. Il n'était pas clair si vous vouliez que quelqu'un entre du texte dans la page HTML et que ce texte apparaisse ensuite sur le canevas, ou si vous alliez utiliser JavaScript pour écrire les informations à l'écran.

Le code suivant écrira du texte dans différentes polices et formats sur votre canevas. Vous pouvez le modifier si vous souhaitez tester d'autres aspects de l'écriture sur un canevas.

 <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 balise d'identification du canevas dans le HTML, puis référencer le nom, soit créer le canevas dans le code JavaScript. Je pense que pour la plupart, je vois le<canvas> balise dans le code HTML et parfois je la vois créée 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);

4

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


3

Oui, bien sûr, vous pouvez facilement écrire un texte sur la toile, et vous pouvez définir le nom de la police, la taille de la police et la couleur de la police. Il existe deux méthodes pour créer un texte sur Canvas, à savoir fillText () et strokeText () . fillText () est utilisée pour créer un texte qui ne peut être rempli que de couleur, alors que strokeText () est utilisé pour créer un texte qui ne peut recevoir qu'une couleur de contour. Donc, si nous voulons créer un texte rempli de couleur et de couleur de contour, nous devons utiliser les deux.

voici l'exemple complet, comment écrire du texte sur une toile:

<canvas id="Canvas01" width="400" height="200" style="border:2px solid #bbb; margin-left:10px; margin-top:10px;"></canvas>

<script>
  var canvas = document.getElementById('Canvas01');
  var ctx = canvas.getContext('2d');

  ctx.fillStyle= "red";
  ctx.font = "italic bold 35pt Tahoma";
  //syntax : .fillText("text", x, y)
  ctx.fillText("StacOverFlow",30,80);

</script>

Voici la démo pour cela, et vous pouvez essayer vous-même pour toute modification: http://okeschool.com/examples/canvas/html5-canvas-text-color


1

J'ai trouvé un bon tutoriel sur oreilly.com .

Exemple de code:

<canvas id="canvas" width ='600px'></canvas><br />
Enter your Text here .The Text will get drawn on the canvas<br />
<input type="text" id="text" onKeydown="func();"></input><br />
</body><br />
<script>
function func(){
var e=document.getElementById("text"),t=document.getElementById("canvas"),n=t.getContext("2d");
n.fillStyle="#990000";n.font="30px futura";n.textBaseline="top";n.fillText(e.value,150,0);n.fillText("thank you, ",200,100);
n.fillText("Created by ashish",250,120)
}
</script>

courtoisie: @Ashish Nautiyal


1

Il est facile d'écrire du texte sur une toile. Disons que votre toile est déclarée comme ci-dessous.

<html>
  <canvas id="YourCanvas" width="500" height="500">
   Your Internet Browser does not support HTML5 (Get a new Browser)
  </canvas>
</html>

Cette partie du code renvoie une variable dans le canevas qui est une représentation de votre canevas en HTML.

  var c  = document.getElementById("YourCanvas");

Le code suivant renvoie les méthodes pour dessiner des lignes, du texte et des remplissages dans votre canevas.

  var ctx = canvas.getContext("2d");

<script>
  ctx.font="20px Times Roman";
  ctx.fillText("Hello World!",50,100);

  ctx.font="30px Verdana";

  var g = ctx.createLinearGradient(0,0,c.width,0);

  g.addColorStop("0","magenta");
  g.addColorStop("0.3","blue");
  g.addColorStop("1.0","red");

  ctx.fillStyle=g; //Sets the fille of your text here. In this case it is set to the gradient that was created above. But you could set it to Red, Green, Blue or whatever.

  ctx.fillText("This is some new and funny TEXT!",40,190);
</script>

Il existe un guide du débutant sur Amazon pour le kindle http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5 + toile + débutants qui vaut largement son prix. Je l'ai acheté il y a quelques jours et il m'a montré de nombreuses techniques simples très utiles.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.