web-dev-qa-db-fra.com

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

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

htmlhtml5canvas
142
Budda
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>
226
Zibri

Dessin de texte sur une toile

Balisage:

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

Script (avec peu d'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>

Découvrez le documentation MDN et cet exemple JSFiddle .

7
Lior Elrom

Canvas le support de texte est en fait assez bon - vous pouvez contrôler font, size, color, horizontal alignment, vertical alignment, et vous pouvez également obtenir métriques de texte pour obtenir la largeur du texte en pixels. De plus, vous pouvez également utiliser les zones canvas transforms à rotate, stretch et même invert.

6
Eric Rowell

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

Le code suivant écrira du texte dans des polices et des formats différents sur votre toile. Vous pouvez modifier cela si 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 placer la balise ID de la zone de dessin dans le code HTML, puis référencer le nom ou créer la zone de dessin dans le code JavaScript. Je pense que la plupart du temps, je vois la balise <canvas> dans le code HTML et la vois créée de manière dynamique 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);
5
user3376708

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

4
Ian Devlin

Oui, bien sûr, vous pouvez facilement écrire un texte sur une toile et définir le nom, la taille et la couleur de la police. Il existe deux méthodes pour créer un texte sur Canvas, à savoir: fillText () et strokeText (). fillText () Cette méthode 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 auquel on ne peut attribuer qu'une couleur de contour. Donc, si nous voulons construire un texte qui a une couleur et une 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 vous essayer à toute modification: http://okeschool.com/examples/canvas/html5-canvas-text-color

3
Kuncara Kurniawan

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 au format HTML.

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

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

  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 pour débutants 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 + canvas + debutants qui en vaut vraiment la peine. Je l'ai acheté il y a quelques jours et il m'a montré beaucoup de techniques simples et très utiles.

1
Doug Hauf

J'ai trouvé n 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
Simon K Bhatta4ya