Heim > Web-Frontend > H5-Tutorial > Hauptteil

Wie zeichne ich einen Kreis im HTML5-Canvas? (Codebeispiel)

不言
Freigeben: 2018-12-04 10:51:29
Original
8786 Leute haben es durchsucht

Canvas kann zum Zeichnen verschiedener Grafiken verwendet werden. Wie kann man also mit HTML5-Canvas einen Kreis zeichnen? In diesem Artikel wird Ihnen die Methode zum Zeichnen von Kreisen auf der HTML5-Leinwand vorgestellt. Werfen wir einen Blick auf den spezifischen Inhalt.

HTML5 canvas

Schauen wir uns das Beispiel direkt 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 cx = 360;
          var cy = 400;
          var radius = 36;

          var context = canvas.getContext(&#39;2d&#39;);
          context.beginPath();
          context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
          context.fillStyle = &#39;#9fd9ef&#39;;
          context.fill();
          context.lineWidth = 1;
          context.strokeStyle = &#39;#00477d&#39;;
          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>
Nach dem Login kopieren

Laufende Ergebnisse

Führen Sie das Obige aus HTML-Datei im Browser. Der folgende Effekt wird angezeigt

HTML5 canvas

Schließlich sind die durch die arc()-Methode angegebenen Koordinaten des Kreises die Mittelpunktskoordinaten des Kreises.

Stellen Sie im obigen HTML-Code den Zeichnungsteil auf den folgenden Code ein.

function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
          return false;
    }
    var cx = 360;    
    var cy = 400;    
    var radius = 36;
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
    context.fillStyle = &#39;#9fd9ef&#39;;
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = &#39;#00477d&#39;;
    context.stroke(); 
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(cx, cy);
    context.stroke();
    }
Nach dem Login kopieren
Der Anzeigeeffekt des obigen Codes ist wie folgt. Sie können sehen, dass die Mittelpunktskoordinate der Mittelpunkt des Kreises ist.

Das obige ist der detaillierte Inhalt vonWie zeichne ich einen Kreis im HTML5-Canvas? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage