如何在 HTML5 Canvas 上绘制二次曲线?

htmlweb developmentfront end technology更新于 2024/1/22 1:48:17

HTML5 的 <canvas> 标签用于通过脚本绘制图形、动画等。它是 HTML5 中引入的新标签。canvas 元素有一个名为 getContext 的 DOM 方法，用于获取渲染上下文及其绘制函数。此函数接受一个参数，即上下文的类型(2d)。

要使用 HTML5 Canvas 绘制二次曲线，请使用 quadraticCurveTo() 方法。此方法将给定点添加到当前路径，并通过给定控制点的二次贝塞尔曲线将其连接到上一个路径。

您可以尝试运行以下代码，学习如何在 HTML5 Canvas 上绘制二次曲线。quadraticCurveTo() 方法中的 x 和 y 参数是端点的坐标。cpx 和 cpy 是控制点的坐标。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>

   <body>
      <canvas id="newCanvas" width="500" height="300" style="border:1px
         solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');

         // Draw shapes
         ctx.beginPath();
         ctx.moveTo(75,25);
         ctx.quadraticCurveTo(25,25,25,62.5);
         ctx.quadraticCurveTo(25,100,50,100);
         ctx.quadraticCurveTo(50,120,30,125);
         ctx.quadraticCurveTo(60,120,65,100);
         ctx.quadraticCurveTo(125,100,125,62.5);
         ctx.quadraticCurveTo(125,25,75,25);
         ctx.stroke();
      </script>
   </body>
</html>