Wie zeichne ich einen Kreis im HTML5-Canvas? (Codebeispiel)-H5-Tutorial-php.cn

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

不言

Freigeben： 2018-12-04 10:51:29

Original

8815 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!