Heim > Artikel > Web-Frontend > Wie zeichne ich mit JavaScript eine glatte Kurve durch mehrere Punkte?

Wie zeichne ich mit JavaScript eine glatte Kurve durch mehrere Punkte?

王林nach vorne: 2023-08-28 22:41:051461Durchsuche

如何使用 JavaScript 通过多个点绘制平滑曲线？

In diesem Artikel erfahren Sie, wie Sie mithilfe von JavaScript mithilfe der Canvas-Browser-API und HTML-Elementen eine glatte Kurve durch mehrere Punkte zeichnen.

Bei der Visualisierung von Daten im Web oder der Erstellung interaktiver Diagramme kann das Zeichnen glatter Kurven durch mehrere Punkte die Schönheit und Lesbarkeit Ihrer Informationen erheblich verbessern. Sehen wir uns einige Beispiele an, um zu sehen, wie dies erreicht werden kann.

Beispiel 1

In diesem Beispiel verwenden wir das Konzept einer Brazier-Kurve, die durch eine Reihe von Kontrollpunkten definiert wird, um eine glatte Kurve durch diese zu zeichnen. Wir werden das Canvas-HTML-Element und seine Kontext-API verwenden, um Punkte vorzudefinieren, durch die eine glatte Kurve gezeichnet werden soll.

Dateiname: index.html

<html lang="en">
   <head>
      <title>
         How to Draw Smooth Curve Through Multiple Points using JavaScript?
      </title>

      <style>
         canvas {
         border: 1px solid #000;
         }
      </style>
   </head>
   <body>
      <canvas id="myCanvas" width="500" height="300"></canvas>

      <script>
         const canvas = document.getElementById("myCanvas");
         const context = canvas.getContext("2d");

         const points = [
            { x: 50, y: 100 },
            { x: 150, y: 200 },
            { x: 250, y: 50 },
            { x: 350, y: 150 },
            { x: 450, y: 100 },
         ];

         function drawSmoothCurve(points) {
            context.beginPath();
            context.moveTo(points[0].x, points[0].y);

            for (let i = 1; i < points.length - 1; i++) {
               const xc = (points[i].x + points[i + 1].x) / 2;
               const yc = (points[i].y + points[i + 1].y) / 2;
               context.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
            }

            // Connect the last two points with a straight line
            context.lineTo(points[points.length - 1].x, points[points.length - 1].y);
            context.stroke();
         }
         drawSmoothCurve(points);
      </script>
   </body>
</html>

Beispiel 2

In diesem Beispiel folgen wir der obigen Codestruktur und zeichnen mithilfe der Bézier-Kurve und der Catmull-Rom-Spline-Methode eine glatte Kurve durch mehrere Punkte.

Dateiname: index.html

<html lang="en">
<head>
   <title>How to Draw Smooth Curve Through Multiple Points using JavaScript?</title>

   <style>
      canvas {
         border: 1px solid #000;
      }
   </style>
</head>
<body>
   <canvas id="myCanvas" width="500" height="300"></canvas>
   <script>
      const canvas = document.getElementById("myCanvas");
      const context = canvas.getContext("2d");

      const points = [
         { x: 50, y: 100 },
         { x: 150, y: 200 },
         { x: 250, y: 50 },
         { x: 350, y: 150 },
         { x: 450, y: 100 },
      ];
      function drawSmoothCurve(points) {
         context.beginPath();
         context.moveTo(points[0].x, points[0].y);

         // Example 1: Bézier Curves
         // context.quadraticCurveTo(cp1x, cp1y, x, y);
         // context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

         for (let i = 1; i < points.length - 1; i++) {
            const xc = (points[i].x + points[i + 1].x) / 2;
            const yc = (points[i].y + points[i + 1].y) / 2;
            context.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
         }

         // Connect the last two points with a straight line
         context.lineTo(points[points.length - 1].x, points[points.length - 1].y);
         context.stroke();
      }

      drawSmoothCurve(points);

      // Example 2: Catmull-Rom Splines
      function catmullRomSpline(points, context) {
         context.beginPath();
         context.moveTo(points[0].x, points[0].y);

         for (let i = 1; i < points.length - 2; i++) {
            const p0 = points[i - 1];
            const p1 = points[i];
            const p2 = points[i + 1];
            const p3 = points[i + 2];
            const t = 0.5;
            const x1 = (-t * p0.x + (2 - t) * p1.x + (t - 2) * p2.x + t * p3.x) / 2;
            const y1 = (-t * p0.y + (2 - t) * p1.y + (t - 2) * p2.y + t * p3.y) / 2;
            const x2 = ((2 * t - 3) * p0.x + (3 - 4 * t) * p1.x + (1 + 2 * t) * p2.x + (-t) * p3.x) / 2;
            const y2 = ((2 * t - 3) * p0.y + (3 - 4 * t) * p1.y + (1 + 2 * t) * p2.y + (-t) * p3.y) / 2;
            const x3 = (t * p1.x + (2 - t) * p2.x) / 2;
            const y3 = (t * p1.y + (2 - t) * p2.y) / 2;
            context.bezierCurveTo(x1, y1, x2, y2,  x3, y3);
         }

         context.lineTo(points[points.length - 2].x, points[points.length - 2].y);
         context.lineTo(points[points.length - 1].x, points[points.length - 1].y);
         context.stroke();
      }
      catmullRomSpline(points, context);
   </script>
</body>
</html>

Fazit

Zusammenfassend lässt sich sagen, dass die Verwendung von JavaScript zum Zeichnen glatter Kurven durch mehrere Punkte die visuelle Schönheit und Lesbarkeit webbasierter Diagramme und Datenvisualisierungen erheblich verbessern kann. Durch die Nutzung der Leistungsfähigkeit von Bezier-Kurven und Catmull-Rom-Splines haben wir gelernt, wie man mit JavaScript mithilfe des Canvas-HTML-Elements und seiner Kontext-API eine glatte Kurve durch mehrere Punkte zeichnet.

Das obige ist der detaillierte Inhalt vonWie zeichne ich mit JavaScript eine glatte Kurve durch mehrere Punkte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html canvas

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：GraphQL verstehen: Einführung in GraphQLNächster Artikel：GraphQL verstehen: Einführung in GraphQL

In Verbindung stehende Artikel

Mehr sehen