So zeichnen Sie den Umriss eines Textes mit HTML5-Canvas-H5-Tutorial-php.cn

So zeichnen Sie den Umriss eines Textes mit HTML5-Canvas

不言

Freigeben： 2018-12-07 09:35:34

Original

5273 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!