HTML5画布二次方曲线教程

来源：互联网发布：设计软件图标矢量图编辑：程序博客网时间：2024/04/29 15:52

创建一个二次曲线与HTML5画布,我们可以使用quadraticCurveTo()方法。二次曲线是由上下文定义的点,一个控制点,和一个结束点。二次曲线可以与线宽设置样式,strokeStyle,lineCap属性。

控制点定义二次曲线的曲率通过创建两个虚构的切向线连接到上下文点和终点。定义的上下文点移至()方法。移动控制点远离点和结束点的上下文将创建更清晰的曲线,并将控制点接近点和结束点的上下文将创造更广泛的曲线。

<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }    </style>  </head>  <body>    <canvas id="myCanvas" width="578" height="200"></canvas>    <script>      var canvas = document.getElementById('myCanvas');      var context = canvas.getContext('2d');      context.beginPath();      context.moveTo(188, 150);      context.quadraticCurveTo(288, 0, 388, 150);      context.lineWidth = 10;      // line color      context.strokeStyle = 'black';      context.stroke();    </script>  </body></html>

0 0