So zeichnen Sie Text mit HTML5-Canvas-H5-Tutorial-php.cn

So zeichnen Sie Text mit HTML5-Canvas

不言

Freigeben： 2020-10-21 09:20:25

Original

6000 Leute haben es durchsucht

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.

So zeichnen Sie Text mit HTML5-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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!