È possibile scrivere testo su HTML5 canvas?

Disegno di testo su una tela

markup:

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

Script (con poche opzioni diverse):

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

Controlla la documentazione MDN e questo esempio JSFiddle .

Canvassupporto di testo è in realtà abbastanza buono - si può controllare font, size, color, horizontal alignment, vertical alignment, e si può anche ottenere metriche del testo per ottenere la larghezza del testo in pixel. Inoltre, è anche possibile utilizzare tela transformsper rotate, stretche anche invertil testo.

È davvero facile scrivere del testo su una tela. Non era chiaro se si desidera che qualcuno inserisca del testo nella pagina HTML e che il testo venga visualizzato nell'area di disegno o se si stesse utilizzando JavaScript per scrivere le informazioni sullo schermo.

Il codice seguente scriverà del testo in diversi tipi di carattere e formati sulla tela. Puoi modificarlo come desideri testare altri aspetti della scrittura su una tela.

 <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. 

È possibile posizionare il tag ID canvas nel codice HTML e quindi fare riferimento al nome oppure è possibile creare il canvas nel codice JavaScript. Penso che per la maggior parte vedo il <canvas>tag nel codice HTML e, a volte, lo vedo creato dinamicamente nel codice JavaScript stesso.

Codice:

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

Dipende da cosa vuoi farci immagino. Se vuoi solo scrivere del testo normale, puoi usarlo .fillText().

Sì, certo, puoi scrivere un testo su tela con facilità e puoi impostare il nome, la dimensione e il colore del carattere. Esistono due metodi per creare un testo su Canvas, ovvero fillText () e strokeText () . Il metodo fillText () viene utilizzato per creare un testo che può essere riempito solo con il colore, mentre trattoText () viene utilizzato per creare un testo a cui può essere assegnato solo un colore di contorno. Quindi, se vogliamo costruire un testo pieno di colore e di colore di contorno, dobbiamo usare entrambi.

qui l'esempio completo, come scrivere testo su tela:

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

Ecco la demo per questo, e puoi provare te stesso per qualsiasi modifica: http://okeschool.com/examples/canvas/html5-canvas-text-color

Ho trovato un buon tutorial su oreilly.com .

Codice di esempio:

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

cortesia: @Ashish Nautiyal

È facile scrivere del testo su una tela. Diciamo che la tua tela è dichiarata come di seguito.

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

Questa parte del codice restituisce una variabile in tela che è una rappresentazione della tela in HTML.

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

Il codice seguente restituisce i metodi per disegnare linee, testo, riempimenti sulla tela.

  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>

C'è una guida per principianti su Amazon per il 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 + tela + principianti che vale la pena. L'ho acquistato un paio di giorni fa e mi ha mostrato molte tecniche semplici che sono state molto utili.