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

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 .

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.

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

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

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

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

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.