js实现三次bezier曲线的拼接

最新推荐文章于 2021-11-03 03:31:55 发布

草稿本111

最新推荐文章于 2021-11-03 03:31:55 发布

阅读量2.8k

点赞数 1

分类专栏：三次bezier曲线的拼接文章标签： bezier曲线

本文链接：https://blog.csdn.net/weixin_43840825/article/details/85423347

版权

本文介绍了如何使用JavaScript实现Bezier曲线的拼接。首先讲解了Bezier曲线的绘制，包括通过算法计算曲线和利用HTML5 canvas的bezierCurveTo方法。然后讨论了曲线拼接的条件与方法，并提供了相关代码示例。

摘要由CSDN通过智能技术生成

要实现bezier曲线的拼接首先要实现bezier曲线的绘制。绘制有两个方法：

利用bezier曲线的定义写算法，生成bezier曲线。

有兴趣的同学可以进去看看：
[一次二次三次bezier曲线的计算方式及demo演示] (https://blog.csdn.net/cdnight/article/details/48494533)

直接利用HTML5中的canvas标签，路径里有个bezierCurveTo方法，利用这个方法，只要输入四个控制点的坐标就能生成一条bezier曲线，非常简单，所以我这里用的就是这个方法。

有兴趣的同学可以进去看看：
[bezierCurveto方法的用法] (http://www.w3school.com.cn/tags/canvas_beziercurveto.asp)

绘制两条曲线之后就可以判断条件进行拼接了

代码：

 <!DOCTYPE html>
  <html> 
  <head>  
   <meta charset="UTF-8">  
    <title>bezier</title>   <style type="text/css">    /*hidden透明边框*/    #hh{
         width: 1500px;     height: 1500px;     border: 1px solid hidden;         }    #cout{
         width: 800px;     height: 230px;     border: 1px solid hidden;     float: left;    }    .b{
         width: 390px;     height: 190px;     border: 1px solid hidden;     float: left;    }     #bd{
         width: 800px;     height: 25px;     border: 1px solid hidden;     position: absolute;     left: 0px;     top: 200px;              }    #huabu{
         width: 1010px;     height:1010px;     border: 1px solid hidden;     float: left; /*    position: relative;     left: 5px;     top: 205px;*/       } /*   #c2{ /*    position: relative;     left: 410px;     top: 0px;*/     float: left;    } */   </style>
  
 </head>
<!--描出4个控制点-->
 <body> <div id="hh">
  <!--1、输入数据-->
  <div id="cout">
   <div class="b">
   <h3>第一条bezier曲线</h3>
   起&nbsp;&nbsp;&nbsp;点：<input maxlength="4" value="0" id="x1" />,<input maxlength="4" value="0" id="y1" /> <br />
    第二点：<input maxlength="4" value="300" id="x2" />,<input maxlength="4" value="0" id="y2" /> <br /> 
    第三点：<input maxlength="4" value="0" id="x3" />,<input maxlength="4" value="300" id="y3" /> <br /> 
    终