HTML5画布二次方曲线教程

最新推荐文章于 2023-09-20 15:37:00 发布

limeiyans

最新推荐文章于 2023-09-20 15:37:00 发布

阅读量1.1k

点赞数

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

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

版权

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

1 篇文章 0 订阅

订阅专栏

创建一个二次曲线与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>

limeiyans

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布二次方曲线教程

创建一个二次曲线与HTML5画布,我们可以使用quadraticCurveTo()方法。二次曲线是由上下文定义的点,一个控制点,和一个结束点。二次曲线可以与线宽设置样式,strokeStyle,lineCap属性。控制点定义二次曲线的曲率通过创建两个虚构的切向线连接到上下文点和终点。定义的上下文点移至()方法。移动控制点远离点和结束点的上下文将创建更清晰的曲线,并将控制点接近点和结束点
复制链接

扫一扫