HTML5画布曲线教程

最新推荐文章于 2023-11-18 14:11:47 发布

limeiyans

最新推荐文章于 2023-11-18 14:11:47 发布

阅读量1k

点赞数

分类专栏： HTML5画布曲线教程文章标签： HTML5画布曲线教程

本文链接：https://blog.csdn.net/limeiyans/article/details/18992429

版权

HTML5画布曲线教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

o与HTML5画布创建一个曲线,我们可以使用bezierCurveTo()方法。Bezier曲线定义的上下文,两个控制点,和一个结束点。与二次曲线、Bezier曲线与两个控制点,而不是一个定义,允许我们创建更复杂的弯曲度。Bezier曲线可以与线宽设置样式,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, 130);
      context.bezierCurveTo(140, 10, 388, 10, 388, 170);
      context.lineWidth = 10;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>