如何使用 JavaScript 通过多个点绘制平滑曲线？-js教程-PHP中文网

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

王林

发布： 2023-08-28 22:41:05

转载

2086人浏览过

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

在本文中，我们将学习如何借助 Canvas 浏览器 API 和 HTML 元素，使用 JavaScript 绘制经过多个点的平滑曲线。

在网络上可视化数据或创建交互式图形时，通过多个点绘制平滑曲线可以大大增强信息的美观性和可读性。让我们通过一些示例来了解如何实现这一点。

示例 1

在此示例中，我们将利用由一组控制点定义的 Brazier 曲线的概念来绘制穿过它们的平滑曲线。我们将使用 canvas HTML 元素及其上下文 API 预定义点，通过这些点绘制平滑曲线。

文件名：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>

登录后复制

示例 2

在本示例中，我们将遵循上述代码结构，使用 Bézier 曲线和 Catmull-Rom 样条方法通过多个点绘制一条平滑曲线。

黑点工具

在线工具导航网站，免费使用无需注册，快速使用无门槛。

查看详情

立即学习“Java免费学习笔记（深入）”；

文件名：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>

登录后复制

结论

总之，使用 JavaScript 通过多个点绘制平滑曲线可以极大地增强基于 Web 的图形和数据可视化的视觉美感和可读性。通过利用 Bezier 曲线和 Catmull-Rom 样条曲线的强大功能，我们学习了如何在 canvas HTML 元素及其上下文 API 的帮助下使用 JavaScript 通过多个点绘制平滑曲线。

以上就是如何使用 JavaScript 通过多个点绘制平滑曲线？的详细内容，更多请关注php中文网其它相关文章！