Heim > Artikel > Web-Frontend > Wie zeichne ich einen Kreis im HTML5-Canvas? (Codebeispiel)

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

不言Original: 2018-12-04 10:51:298694Durchsuche

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>

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

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!

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 ein Rechteck mit HTML5-CanvasNächster Artikel：So zeichnen Sie ein Rechteck mit HTML5-Canvas

In Verbindung stehende Artikel

Mehr sehen