Maison >interface Web >js tutoriel >Comment dessiner une courbe lisse passant par plusieurs points en utilisant JavaScript ?

Comment dessiner une courbe lisse passant par plusieurs points en utilisant JavaScript ?

王林avant: 2023-08-28 22:41:051503parcourir

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

Dans cet article, nous apprendrons comment tracer une courbe lisse passant par plusieurs points à l'aide de JavaScript à l'aide de l'API du navigateur Canvas et des éléments HTML.

Lors de la visualisation de données sur le Web ou de la création de graphiques interactifs, tracer des courbes douces à travers plusieurs points peut grandement améliorer la beauté et la lisibilité de vos informations. Passons en revue quelques exemples pour voir comment cela peut être réalisé.

Exemple 1

Dans cet exemple, nous utiliserons le concept de courbe Brazier définie par un ensemble de points de contrôle pour tracer une courbe lisse à travers eux. Nous utiliserons l'élément HTML canvas et son API de contexte pour prédéfinir les points à travers lesquels tracer une courbe lisse.

Nom du fichier : 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>

Exemple 2

Dans cet exemple, nous suivrons la structure de code ci-dessus et tracerons une courbe lisse passant par plusieurs points en utilisant la courbe de Bézier et la méthode spline Catmull-Rom.

Nom du fichier : 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>

Conclusion

En résumé, l'utilisation de JavaScript pour dessiner des courbes douces à travers plusieurs points peut considérablement améliorer la beauté visuelle et la lisibilité des graphiques et des visualisations de données basés sur le Web. En tirant parti de la puissance des courbes de Bézier et des splines Catmull-Rom, nous avons appris à dessiner une courbe lisse passant par plusieurs points à l'aide de JavaScript à l'aide de l'élément HTML canevas et de son API de contexte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html canvas

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comprendre GraphQL : introduction à GraphQLArticle suivant：Comprendre GraphQL : introduction à GraphQL

Articles Liés

Voir plus