endgültige Renderings1. Variablen definieren
Definieren Sie den Radius, definieren Sie die Dicke des Rings, definieren Sie die Mittelposition des Kreises und definieren Sie die Standardfüllfarbe
lass Radius = 75let Dicke= 10let innerRadius = Radius - Dickelet x = 75let y = 75var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');ctx.fillStyle = #f2d7d7; 2. Zeichnen Sie den ersten Bogen ctx.beginPath();ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)
Achten Sie auf die Methode beginPath(), den ersten Schritt beim Generieren eines Pfades. Im Wesentlichen besteht ein Pfad aus vielen Unterpfaden, die alle in einer Liste aufgeführt sind, und alle Unterpfade (Linien, Bögen usw.) bilden eine Form. Bei jedem Aufruf dieser Methode wird die Liste gelöscht und zurückgesetzt, und dann können wir ein neues Diagramm neu zeichnen.
Mit anderen Worten, diese Methode kann zum Gruppieren von Canvas-Bildern und zum Zeichnen neuer Grafiken verwendet werden. Wenn diese Methode nicht aufgerufen wird, werden die neuen Grafiken mit den vorherigen Grafiken verbunden.
3. Zeichnen Sie die erste Verbindungctx.quadraticCurveTo((x - innerRadius) - Dicke / 2, y - Dicke, x - innerRadius, y)
Die Verbindung wird mithilfe einer quadratischen Bezier-Kurve gezeichnet. Die quadraticCurveTo(cp1x, cp1y, x, y)-Methode akzeptiert 4 Parameter. Der erste und der zweite Parameter sind die Endpunkte das offizielle Dokument
Ermitteln Sie einfach die Kontrollpunkte und Endpunkte, um einen Bogen zu zeichnen
4. Zeichnen Sie den zweiten Bogenctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)
Achten Sie auf den letzten Parameter nach der Methode. Setzen Sie ihn auf true, was bedeutet, dass er gegen den Uhrzeigersinn zeichnet (der Standardwert ist im Uhrzeigersinn).
5. Zeichnen Sie die zweite Verbindungctx.quadraticCurveTo(y – Dicke, (x – innerRadius) – Dicke / 2, x, y – innerRadius – Dicke)
Dieser Schritt unterscheidet sich eigentlich nicht wesentlich vom dritten Schritt. Wir haben lediglich die Parameterpositionen geändert.
6. Füllungctx.fill();
An diesem Punkt ist ein einfacher, nicht geschlossener Ring fertiggestellt
Zeichnen Sie einen zweiten Fortschrittsbalkenring
7. Initialisierungctx.beginPath();ctx.fillStyle = #e87c7c;
beginPath bedeutet das Zeichnen einer neuen Grafik. Wenn diese Methode nicht aufgerufen wird, wird die später gezeichnete Grafik mit der zuvor gezeichneten Grafik verbunden.
8. Zeichnen Sie den zweiten Fortschrittsbalkenringctx.beginPath();ctx.fillStyle = #e87c7c;ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)ctx.quadraticCurveTo((x + innerRadius) + Dicke / 2, y + Dicke, x + innerRadius, y)ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)ctx.quadraticCurveTo(y – Dicke, (x – innerRadius) – Dicke / 2, x, y – innerRadius – Dicke)ctx.fill();
Da die Zeichenmethode genau die gleiche ist wie beim ersten Kreis, besteht keine Notwendigkeit, sie zu wiederholen. Der Unterschied besteht nur im Kreisbogen.
9. Leinwand drehentransformieren: drehen(-135 Grad);
Da die CSS-Rotation bequemer ist und die Winkelberechnung erspart, verwende ich zum Drehen die CSS-Transformation. Natürlich bietet Canvas auch Rotationsmethoden
Vollständiger Code
<!DOCTYPE html><html lang=cn><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Kompatibler Inhalt=ie=edge> <title>canvas</title> <style> .ring { width: 150px; height: 150px; flex; align-content: center; flex-direction: position: relative; absolut; Schriftgröße: 30px; Schriftgröße: fett; Farbe: rot } .small { Schriftgröße: 12px; Schriftstärke: heller; } .title { Farbe: rot; unten: 0; </style></head><body> <canvas id=tutorial width=150 height= 150></canvas> <span class=fraction>100 <span class=small>Punkte</span> </span> <span class=title>Servicepunkte</span> </div> <script> let radius = 75 let thick = 10 let innerRadius = radius - thick let x = 75 let y = 75 var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI) ctx.quadraticCurveTo((x - innerRadius) - Dicke/2 , y - Dicke, x - innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true) ctx.quadraticCurveTo(y – Dicke, (x – innerRadius) – Dicke / 2, x, y – innerRadius – thick) ctx.fill(); ctx.beginPath(); ctx.fillStyle = #e87c7c; ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + innerRadius) + Dicke / 2, y + Dicke, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y – Dicke, (x – innerRadius) – Dicke / 2, x, y – innerRadius – Dicke) ctx.fill(); </script></body></html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.