Ist es möglich, Text in HTML5 zu schreiben canvas?

Zeichnen von Text auf einer Leinwand

Markup:

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

Skript (mit wenigen verschiedenen Optionen):

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

Lesen Sie die MDN-Dokumentation und dieses JSFiddle- Beispiel.

CanvasText - Unterstützung ist eigentlich ziemlich gut - Sie können steuern font, size, color, horizontal alignment, vertical alignment, und Sie können auch Textmetriken erhalten die Textbreite in Pixel zu erhalten. Darüber hinaus können Sie auch Leinwand transformsauf rotate, stretchund sogar invertText.

Es ist wirklich einfach, Text auf eine Leinwand zu schreiben. Es war nicht klar, ob jemand Text in die HTML-Seite eingeben und diesen Text dann auf der Leinwand anzeigen soll oder ob Sie JavaScript verwenden möchten, um die Informationen auf den Bildschirm zu schreiben.

Der folgende Code schreibt Text in verschiedenen Schriftarten und Formaten auf Ihre Leinwand. Sie können dies ändern, wenn Sie andere Aspekte des Schreibens auf eine Leinwand testen möchten.

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

Sie können entweder das Canvas-ID-Tag im HTML-Code platzieren und dann auf den Namen verweisen, oder Sie können das Canvas im JavaScript-Code erstellen. Ich denke, dass ich das <canvas>Tag größtenteils im HTML-Code sehe und gelegentlich sehe, dass es dynamisch im JavaScript-Code selbst erstellt wird.

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

Kommt darauf an, was du damit machen willst, denke ich. Wenn Sie nur normalen Text schreiben möchten, können Sie diesen verwenden .fillText().

Ja, natürlich können Sie problemlos einen Text auf Leinwand schreiben und den Schriftnamen, die Schriftgröße und die Schriftfarbe festlegen. Es gibt zwei Methoden, um einen Text auf Canvas zu erstellen: fillText () und StrokeText () . Die Methode fillText () wird verwendet, um einen Text zu erstellen, der nur mit Farbe gefüllt werden kann, während stroTText () verwendet wird, um einen Text zu erstellen, dem nur eine Umrissfarbe zugewiesen werden kann. Wenn wir also einen Text erstellen möchten, der mit Farbe gefüllt ist und eine Umrissfarbe hat, müssen wir beide verwenden.

Hier das vollständige Beispiel, wie man Text auf Leinwand schreibt:

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

Hier die Demo dazu, und Sie können sich selbst für jede Änderung versuchen: http://okeschool.com/examples/canvas/html5-canvas-text-color

Ich habe ein gutes Tutorial auf oreilly.com gefunden .

Beispielcode:

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

Mit freundlicher Genehmigung von @Ashish Nautiyal

Es ist einfach, Text auf eine Leinwand zu schreiben. Nehmen wir an, Ihre Leinwand wird wie folgt deklariert.

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

Dieser Teil des Codes gibt eine Variable in Zeichenfläche zurück, die eine Darstellung Ihrer Zeichenfläche in HTML ist.

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

Der folgende Code gibt die Methoden zum Zeichnen von Linien, Text und Füllungen auf Ihrer Leinwand zurück.

  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>

Auf Amazon gibt es einen Leitfaden für Anfänger für das 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 + Leinwand + Anfänger , die das Geld wert ist. Ich habe es vor ein paar Tagen gekauft und es hat mir viele einfache Techniken gezeigt, die sehr nützlich waren.