Ausführliche grafische Erklärung zum Zeichnen von Vollkreisen und Hohlkreisen mit Leinwand-HTML-Tutorial-php.cn

Ausführliche grafische Erklärung zum Zeichnen von Vollkreisen und Hohlkreisen mit Leinwand

yulia

Freigeben： 2018-10-20 14:58:56

Original

15612 Leute haben es durchsucht

Canvas ist eine neue Funktion in HTML5. Sie kann verschiedene Grafiken im Browser zeichnen. Können Sie als Front-End-Mitarbeiter einen Kreis zeichnen? In diesem Artikel erfahren Sie, wie Sie mit Canvas einen Vollkreis zeichnen und den Code für die Verwendung eines Canvas-Bogens zum Zeichnen eines Hohlkreises teilen. Er hat einen bestimmten Referenzwert und interessierte Freunde können darauf verweisen.

Canvas arc() in HTML5 kann zum Erstellen von Kreisen verwendet werden. Zunächst möchte ich Ihnen die Syntax und Parametereinstellungen von arc() erläutern.

Syntax: arc(x,y,) r,sAngle, eAngle, gegen den Uhrzeigersinn)

x stellt die X-Achsenkoordinate des Kreismittelpunkts dar
y stellt die Y-Achsenkoordinate des Kreismittelpunkts dar
r stellt den Radius von dar Der Kreis
sAngle stellt den Anfangswinkel des Kreises dar, berechnet im Bogenmaß, 0 Grad liegt an der Drei-Uhr-Position des Kreises
eAngle stellt den Endwinkel des Kreises dar, gemessen im Bogenmaß.
Gegen den Uhrzeigersinn ist ein optionaler Wert, der die Richtung des Zeichnens eines Kreises angibt, im Uhrzeigersinn oder gegen den Uhrzeigersinn. Falsch ist im Uhrzeigersinn, wahr ist gegen den Uhrzeigersinn

Hinweis: Verwenden Sie arc (), um einen Kreis zu erstellen. Sie müssen festlegen der Anfangswinkel auf 0 und der Endwinkel auf 2*Math.PI

Den Winkel zum Zeichnen des Kreises entnehmen Sie bitte der Abbildung unten:

Ausführliche grafische Erklärung zum Zeichnen von Vollkreisen und Hohlkreisen mit Leinwand

Beispiel 1: Verwenden Sie Canvas, um einen Hohlkreis zu zeichnen. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
 </body>
 <script type="text/javascript">
  var c=document.getElementById("myCanvas");//找到 <canvas> 元素:
  var ctx=c.getContext("2d");  //创建context对象
  ctx.beginPath();//标志开始一个路径
  ctx.arc(100,50,40,0,2*Math.PI);//在canvas中绘制圆形
  ctx.stroke()
 </script>
</html>

Nach dem Login kopieren

Rendering:

Ausführliche grafische Erklärung zum Zeichnen von Vollkreisen und Hohlkreisen mit Leinwand

Beispiel 2: Verwenden Sie Canvas, um einen zu zeichnen Roter durchgezogener Kreis, der Code lautet wie folgt:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
 </body>
 <script type="text/javascript">
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");  
  ctx.beginPath();
  ctx.arc(100,50,40,0,2*Math.PI);
  ctx.fillStyle="red";
  ctx.fill();
  ctx.stroke();
 </script>
</html>

Nach dem Login kopieren

fillStyle-Attribut kann die Farbe des Kreises festlegen. In diesem Beispiel wird die Farbe auf den Kreis angewendet Der Effekt ist wie in der Abbildung gezeigt:

Ausführliche grafische Erklärung zum Zeichnen von Vollkreisen und Hohlkreisen mit Leinwand

Das Obige zeigt Ihnen, wie man einen Kreis mit Leinwand zeichnet. Freunde, die es noch nie gemacht haben, müssen es ausprobieren selbst, um zu sehen, ob sie einen Kreis zeichnen können. Ich hoffe, dieser Artikel hilft Ihnen.

【Empfohlene verwandte Tutorials】

1. Html5-Video-Tutorial
3 Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonAusführliche grafische Erklärung zum Zeichnen von Vollkreisen und Hohlkreisen mit Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!