Wie kann ich Text auf ein HTML5-Canvas-Element schreiben?

150

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

Budda
quelle
1
Ich würde empfehlen, das <a href=" diveintohtml5.info/"> diveintohtml5 </ a > -Site durchzulesen. Es gibt ein eigenes <a href=" diveintohtml5.info/canvas.html#text"> Kapitel über text</a> . Es ist eine sehr gute Lektüre.
Chelmertz
Zusätzlich zu den anderen Antworten benötigen Sie ein zusätzliches Skript, das hier verfügbar ist, wenn Sie Text mit excanvas (für IE-Unterstützung) schreiben möchten : code.google.com/p/explorercanvas/issues/detail?id=6 Der Standard-Download ( code.google.com/p/explorercanvas/downloads/list ) enthält nicht die Methoden fillText und StrokeText.
Castrohenge
2
@IvanCastellanos Haben Sie relevante Suchergebnisse gefunden? Es kann hilfreich sein, sie hier zu posten, wenn Sie welche gefunden haben.
Anderson Green
2
@IvanCastellanos - diese Frage (zumindest für mich) steht jetzt ganz oben für "HTML-Canvas-Text" bei Google. Ist das nicht der Zweck des Stapelüberlaufs?
Colincameron
Ja, das ist auf Canvas einfach. Ich würde Ihrem Beitrag mehr hinzufügen, damit Sie einige Beispiele dafür zeigen können, was Sie versucht haben und was Sie nicht versucht haben. Nur die Frage ist nicht wirklich von Vorteil für Stackoverflow.com
Doug Hauf

Antworten:

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>

Zibri
quelle
3
Gibt es eine Möglichkeit, die Schriftbreite und -größe zu ermitteln, damit wir sie zentrieren können? (Dynamischer Inhalt)
Oliver Dixon
1
Angenommen : Ihre Leinwand Breite-200, Höhe: 100 horizontal : ctx.textAlign = 'Mitte' ctx.fillText ('Hallo', 100 , 10) vertikal : ctx.textBaseline = 'Mitte' ctx.fillText ('Hallo', 10 , 50 )
Tomision
Dokumentation:fillText
Jpaugh
7

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.

Lior Elrom
quelle
6

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.

Eric Rowell
quelle
5

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);
Paul D. Waite
quelle
4

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

Ian Devlin
quelle
3

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

Kuncara Kurniawan
quelle
1

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

Simon K Bhatta4ya
quelle
1

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.

Doug Hauf
quelle