Bagaimana untuk melukis lengkung licin melalui berbilang titik menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk melukis lengkung licin melalui berbilang titik menggunakan JavaScript?

王林

Lepaskan： 2023-08-28 22:41:05

ke hadapan

1461 orang telah melayarinya

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

Dalam artikel ini, kita akan belajar cara melukis lengkung licin melalui berbilang titik menggunakan JavaScript dengan bantuan API pelayar Kanvas dan elemen HTML.

Apabila menggambarkan data di web atau mencipta graf interaktif, melukis lengkung licin melalui berbilang titik boleh meningkatkan keindahan dan kebolehbacaan maklumat anda. Mari kita lihat beberapa contoh untuk melihat bagaimana ini boleh dicapai.

Contoh 1

Dalam contoh ini, kami akan menggunakan konsep lengkung Brazier yang ditakrifkan oleh satu set titik kawalan untuk melukis lengkung licin melaluinya. Kami akan menggunakan elemen HTML kanvas dan API konteksnya untuk mentakrifkan titik untuk melukis lengkung yang lancar.

Nama fail: 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>

Salin selepas log masuk

Contoh 2

Dalam contoh ini, kita akan mengikut struktur kod di atas dan melukis lengkung licin melalui berbilang titik menggunakan kaedah lengkung Bézier dan kaedah spline Catmull-Rom.

Nama fail: 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>

Salin selepas log masuk

Kesimpulan

Kesimpulannya, menggunakan JavaScript untuk melukis lengkung licin melalui berbilang titik boleh meningkatkan keindahan visual dan kebolehbacaan graf berasaskan web dan visualisasi data. Dengan memanfaatkan kuasa lengkung Bezier dan spline Catmull-Rom, kami mempelajari cara melukis lengkung licin melalui berbilang titik menggunakan JavaScript dengan bantuan elemen HTML kanvas dan API konteksnya.

Atas ialah kandungan terperinci Bagaimana untuk melukis lengkung licin melalui berbilang titik menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!