Heim > Artikel > Web-Frontend > So zeichnen Sie Text mit HTML5-Canvas

So zeichnen Sie Text mit HTML5-Canvas

不言Original: 2018-12-03 16:23:345909Durchsuche

So verwenden Sie HTML5-Canvas zum Zeichnen von Text: Erstellen Sie zunächst die entsprechende HTML-Beispieldatei und zeichnen Sie dann den farbigen Text mit der fillText-Methode auf die Canvas.

Wenn Sie HTML5 Canvas zum Zeichnen von Text verwenden möchten, müssen Sie die fillText()-Methode des Canvas-Kontexts verwenden. Schauen wir uns den spezifischen Inhalt unten an.

HTML5 canvas

Schauen wir uns zunächst ein konkretes Beispiel an

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8"/>
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var context = canvas.getContext(&#39;2d&#39;);
    context.font = &#39;normal 18pt "楷体"&#39;;
    context.fillText(&#39;Hello HTML Canvas World!&#39;, 60, 200);
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Erklärung:

Der folgende Code ruft das Canvas-Objekt ab und ruft das ab Kontext.

var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  var context = canvas.getContext(&#39;2d&#39;);

Unten finden Sie den Code zum Zeichnen der Zeichen. Gibt die Schriftartinformationen für die Zeichen an, die in der Schriftarteigenschaft gezeichnet werden sollen. Verwenden Sie die Methode fillText(), um eine Zeichenfolge auf der Leinwand zu zeichnen. Als erstes Argument wird die zu zeichnende Zeichenfolge angegeben, als zweites und drittes Argument werden die X- und Y-Koordinaten des Zeichenanfangs übergeben.

context.font = &#39;normal 18pt "楷体"&#39;;
context.fillText(&#39;Hello HTML Canvas World!&#39;, 60, 200);

Laufergebnisse

Verwenden Sie einen Webbrowser, um die obige HTML-Datei anzuzeigen. Erhalten Sie das unten gezeigte Anzeigeergebnis.

HTML5 canvas

Als nächstes schauen wir uns an, wie man die Farbe des Textes ändert

Der Code lautet wie folgt

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var context = canvas.getContext(&#39;2d&#39;);
    context.font = &#39;normal 18pt "楷体"&#39;;
    context.fillStyle = &#39;red&#39;;
    context.fillText(&#39;你好，PHP中文网！！！&#39;, 60, 200);
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Anleitung:

Ändern Sie die Textfarbe. Sie müssen das fillStyle-Attribut auf die Textfarbe festlegen.

 context.font = &#39;normal 18pt "楷体"&#39;;
 context.fillStyle = &#39;red&#39;;
 context.fillText(&#39;你好，PHP中文网！！！&#39;, 60, 200);

Ausführungsergebnisse:

Verwenden Sie einen Webbrowser, um die obige HTML-Datei anzuzeigen. Sie erhalten den im Bild unten gezeigten Effekt mit gezeichneter roter Schriftart.

HTML5 canvas

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Text mit HTML5-Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie das Datalist-Element-Tag in HTML5Nächster Artikel：So verwenden Sie das Datalist-Element-Tag in HTML5

In Verbindung stehende Artikel

Mehr sehen