suchen

Heim  >  Artikel  >  Web-Frontend  >  So zeichnen Sie den Umriss eines Textes mit HTML5-Canvas

So zeichnen Sie den Umriss eines Textes mit HTML5-Canvas

不言
不言Original
2018-12-03 16:55:135275Durchsuche

Wenn Sie HTML5 Canvas verwenden möchten, um die Umrisse von Text zu zeichnen, müssen wir die Methode StrokeText() im Canvas-Kontext verwenden. Schauen wir uns den spezifischen Inhalt unten an.

HTML5 canvas

Schauen wir uns zunächst ein konkretes Beispiel an

Der Code lautet wie folgt

Erstellen Sie die folgende HTML-Datei

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <style type="text/css">
    <!--
    /*背景颜色和背景图*/
    .canvas {
      background-color: #FFFFFF;
      background-image: url("img/flower.jpg");
    }
    -->
  </style>
  <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 28pt "楷体"&#39;;
    context.strokeText(&#39;你好，PHP中文网！！！&#39;, 60, 200);
  }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="360" class="canvas"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Beschreibung:

Im Folgenden werden das Canvas-Objekt und der Kontext abgerufen. 

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

Das Folgende ist der Code zum Zeichnen der Zeichen. Geben Sie die Schriftartinformationen des zu zeichnenden Zeichens in der Eigenschaft „font“ an. Verwenden Sie die Methode „StrokeText()“, um den String-Umriss auf der Leinwand zu zeichnen. Als erster Parameter werden der gezeichnete String, die X-Koordinate und die Y-Koordinate des Zeichenanfangs angegeben zum zweiten und dritten Parameter. 

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

Laufergebnisse

Verwenden Sie einen Webbrowser, um die obige HTML-Datei anzuzeigen. Sie erhalten den unten gezeigten Anzeigeeffekt.

HTML5 canvas

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie den Umriss eines Textes 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 zeichnen Sie Text mit HTML5-CanvasNächster Artikel：So zeichnen Sie Text mit HTML5-Canvas

In Verbindung stehende Artikel

Mehr sehen