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

So zeichnen Sie Linien mit HTML5-Canvas

不言
不言Original
2018-12-04 11:48:255555Durchsuche

Um HTML Canvas zum Zeichnen von Linien zu verwenden, müssen wir die Methoden MoveTo() und LineTo() des Canvas-Kontexts verwenden.

HTML5 canvas

Schauen wir uns zunächst ein Beispiel an

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.beginPath();
          context.moveTo(120, 60);
          context.lineTo(240, 90);
          context.stroke();
      }
    </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>

Anleitung:

  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.moveTo(120, 60);
    context.lineTo(240, 90);
    context.stroke();
  }

Analyse

Der obige JavaScript-Code ist der Zeichencode. Verwenden Sie die Methode document.getElementById(), um den Canvas-Kontext abzurufen, und rufen Sie die Methode getContext() für das Canvas-Objekt auf, um den zu erhalten Canvas-Kontext und rufen Sie die Methode beginPath () auf, um den Pfad zu starten. Verwenden Sie moveTo (), um den Stift an die angegebene Position zu bewegen, und zeichnen Sie die Linie an die durch die Methode lineTo () angegebene Position die Methode Stroke().

Ergebnisse ausführen

Das Ausführen der obigen HTML-Datei zeigt den folgenden Effekt

HTML5 canvas

Dann schauen wir uns ein Beispiel an

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.beginPath();
          context.moveTo(120, 60);
          context.lineTo(240, 90);
          context.stroke();

          context.beginPath();
          context.moveTo(120, 75);
          context.lineTo(260, 120);
          context.stroke();

          context.beginPath();
          context.moveTo(160, 100);
          context.lineTo(200, 140);
          context.lineWidth = "3";
          context.stroke();

          context.beginPath();
          context.moveTo(200, 40);
          context.lineTo(360, 120);
          context.strokeStyle = &#39;#00C080&#39;;
          context.stroke();

          context.beginPath();
          context.moveTo(40, 20);
          context.lineTo(80, 160);
          context.strokeStyle = &#39;#C00080&#39;;
          context.lineWidth = "1";
          context.stroke();

          context.beginPath();
          context.moveTo(400, 10);
          context.lineTo(380, 200);
          context.strokeStyle = "rgb(96, 96, 225)";
          context.stroke();
      }
    </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>

Anleitung:

Im obigen Code ändern wir die Dicke und Farbe der Linie.

Um die Linienstärke zu ändern, legen Sie die Linienstärke in der lineWidth-Eigenschaft des Canvas-Kontexts fest. Um die Linienfarbe zu ändern, geben Sie die Zeichenfarbe in der StrokeStyle-Eigenschaft des Kontexts an. Für Farbspezifikationen können außerdem Farbnamen wie Hexadezimalformat, „RGB“-Format, „Blau“, „Rot“ usw. verwendet werden. Solange der Wert einmal festgelegt ist, wird er nicht initialisiert, selbst wenn a Der neue Pfad wird mit beginPath() erstellt. Der festzulegende Wert.

Beispiel

  context.beginPath();
  context.moveTo(160, 100);
  context.lineTo(200, 140);
  context.lineWidth = "3";
  context.stroke();
  context.beginPath();
  context.moveTo(200, 40);
  context.lineTo(360, 120);
  context.strokeStyle = &#39;#00C080&#39;;
  context.stroke();

Da im Fall des obigen Codes die zweite Zeile lineWidth nicht angibt, kann der Wert der zuvor angegebenen lineWidth verwendet werden.

Laufergebnisse

HTML5 canvas

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Linien 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