Ich möchte mit Ihnen die Wirkung des Bildes unten teilen, das ich kürzlich umgesetzt habe.
Wenn wir die Animation der Kurve unten zeichnen möchten
Wenn Sie jedes Mal eine kurze Verbindungslinie zeichnen, wird das Bild unten in fünf Segmente unterteilt.
Lesen Sie zehn weitere Absätze
Wenn die Anzahl der geteilten Segmente ausreicht, sieht das Zeichnen eines Segments nach dem anderen wie eine gekrümmte Flugbahn aus.
quadratische Bézier-Kurve /** * Quadratische Bezier-Kurvenanimation* @param {Array<Nummer>} Startpunktkoordinaten starten* @param {Array<Nummer>} Krümmungspunktkoordinaten (d. h. der Wendepunkt, keine exakten Koordinaten, nur ungefähre Richtung) * @param {Array<Nummer>} Ende Endpunktkoordinaten * @param {Nummer} Prozentsatz der Zeichnung (0-100) */ function drawCurvePath(start, point, end, percent){ ctx.beginPath(); //Mit dem Zeichnen von Linien beginnen ctx.moveTo(start[0], start[1]); //Bewege den Stift zum Startpunkt für (var t = 0; t <= Prozent / 100; t += 0.005 ) { //Erhalte die Koordinaten jedes Zeitpunkts var x = quadraticBezier(start[0], point[0], end[0], t); quadraticBezier(start[1], point[1], end[1], t); ctx.lineTo(x, y); //Zeichne eine gerade Linie vom vorherigen Zeitpunkt zum aktuellen Zeitpunkt} ctx.Stroke( ); //Strich} /** * Quadratische Bezier-Kurvengleichung* @param {Array<Nummer>} Startstartpunkt* @param {Array<Nummer>} Krümmungspunkt* @param {Array<Nummer>} Endendpunkt * @param {number} Zeichenfortschritt (0-1) */ function quadraticBezier(p0, p1, p2, t) { var k = 1 - t; return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2 }Ausführlichere Inhalte zur Bezier-Kurve finden Sie in diesem Blog
in vollständigen Code umwandeln
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Quadratische Bezier-Kurvenanimation</title> <style> body { background: #0f1632 } #canvas { border: 1px solid #ccc; } #img { display: none; <!--Verstecken Sie das Bild einfach direkt, es wird später direkt zitiert--> </style></head><body> <canvas id=canvas width =1500 Höhe =750></canvas> <img id=img src=https://s3.imgsha.com/2019/04/22/light.png> <script> var ctx = document.getElementById('canvas').getContext('2d'); var img = document.getElementById('img'); 300, 100], Ende: [100, 400], Abteilung: 'Daten 1', Wert: 4321 } Funktion init(){ Prozent = 0; //Setze den Prozess jedes Mal zurück draw(); } function draw(){ ctx.clearRect(0, 0, 1500, 750); //Löschen Sie die Leinwand jedes Mal ctx.strokeStyle = ' # ffffff'; //Legen Sie den Linienstil fest 100) { //Aufruf fortsetzen, wenn die Zeichnung nicht abgeschlossen ist, wird der Fortschritt zurückgesetzt requestAnimationFrame(draw); /... } function quadraticBezier( p0, p1, p2, t) { //... } </script></body></html>Die Animation kommt heraus
Wie bereits erwähnt, ist der point in drawCurvePath(start, point, end, percent) kein spezifischer Krümmungspunkt, sondern eine allgemeine Richtung.
Schauen wir uns die Situation an, wenn point in [200,200] geändert wird.
Wenn Sie den Falleffekt erzielen möchten, müssen Sie der Linie einen Verlaufseffekt von oben nach unten und von fern nach nah hinzufügen.
/** * Erstelle einen linearen Farbverlauf* @param {Array<Nummer>} Start Startpunkt* @param {Array<Nummer>} Krümmungspunkt* @param {Array<Nummer>} Ende Endpunkt* @param {Nummer} Zeichnung progress ( 0-1) */function createLinearGradient(start,end,startColor,endColor){ var lineGradient = ctx.createLinearGradient(...start, ...end); lineGradient.addColorStop(0, startColor); // lineGradient.addColorStop(0.3, '#fff'); lineGradient.addColorStop(1, endColor}/Die Zeichenfunktion benötigt einige Anpassungen function draw(){ // ctx.StrokeStyle = '#ffffff'; ctx.StrokeStyle = createLinearGradient(data.start, data.end, 'rgba(255,255,255,.2)', '#fff' );Einzelheiten zum Leinwandverlauf finden Sie im MDN
Kopf-Heiligenschein Um einen Kopfhalo hinzuzufügen, müssen Sie einen Kreis zeichnen und einen radialen Farbverlauf festlegen. Verwenden Sie die Funktion drawCurvePath um x und y abzurufen und die Position des Kreises zurückzusetzen.
function createHeadLight(x,y){ ctx.beginPath(); //Erstelle einen radialen Farbverlauf var radialGradient = ctx.createRadialGradient(x, y, 0, x, y, 20); radialGradient.addColorStop(0, rgba(255,255,255, 1)); radialGradient.addColorStop(.2, rgba(255,255,255,.8)); radialGradient.addColorStop(1, transparent); //Zeichne einen Kreis ctx.arc(x, y, 20, 0, 2 * Math .PI, false); ctx.fill();}//Die Funktion drawCurvePath benötigt einige Anpassungen function drawCurvePath(start, point, end, percent){ //... ctx.Stroke(); // Stroke createHeadLight(x,y) // Draw ein Kreis, genau wie das Zeichnen einer Linienfrequenz} Einzelheiten arc Bogenparametern zum Zeichnen von Kreisen finden Sie im MDN
Das Hinzufügen von Text ist dem Hinzufügen eines Kopfhalos sehr ähnlich. Beide verwenden die Funktion drawCurvePath um x, y zu erhalten und die Position des Textblocks zurückzusetzen.
/** * Text erstellen* @param {String} Abteilungsdaten* @param {Number} Daten* @param {Number} x-Achsen-Koordinate* @param {Number} y-Achsen-Koordinate*/Funktion drawText(department, value, x, y) { ctx.fillStyle = '#fff' ctx.font = 22px Microsoft Yahei ctx.fillText(department, x + 30, y + 20); //Um den Text in der unteren rechten Ecke des Halos x zu erstellen, muss die y-Achse um einen gewissen Abstand versetzt werden. var width = ctx.measureText(value).width; //Breite ermitteln des Textes ctx.fillStyle = createLinearGradient([x + 30, 0], //Der Rendering-Bereich der X-Achse des Textverlaufs beträgt [x+30,x+30+Textbreite], [x + 30 + Breite, 0], //Hier ist y auf 0 gesetzt, da es keine API zum Ermitteln der Texthöhe gibt. Das Schreiben von 0 ist ebenfalls akzeptabel. '#fffd00', '#ff6d00' ); 50 ); } //Die Funktion drawCurvePath benötigt einige Anpassungen function drawCurvePath(start, point, end, percent, Department, value) { //... createHeadLight(x,y) drawText(department, value, x, y) } Fügen Sie Text und Bilder an der Endposition hinzu, nachdem die Animation abgeschlossen istBitte beachten Sie, dass Sie beim Hinzufügen von Text und Bildern nach Abschluss der Animation die Leinwand sofort nach Abschluss der Kurvenanimation reinigen und dann Text und Bilder hinzufügen müssen.
/** * Bild erstellen* @param {Number} x-Achsenkoordinate* @param {Number} y-Achsenkoordinate*/function drawImg(x, y) { ctx.drawImage(img, x - img.width / 2, y - img.height); }//Die Zeichenfunktion benötigt einige Anpassungen draw(){ //... if (percent <= 100) { requestAnimationFrame(draw); }else{ ctx.clearRect(0, 0, 1500, 750); //Löschen Sie die Leinwand sofort nach Abschluss der Kurvenanimation. drawText(data.department, //Text rendern data.value, data.end[0], data .end[1 ]) drawImg(data.end[0], data.end[1]) //Das Bild rendern setTimeout(function(){ //Init() nach 2000 ms neu zeichnen },2000) } } BeendenDer vollständige Code dieses Beispiels
Der vollständige Code des Beispiels im ersten Bild des Artikels
Referenzartikel: Verwenden Sie Canvas, um eine Kurvenanimation zu zeichnen – umfassendes Verständnis von Bezier-Kurven
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.