二次贝塞尔曲线和三次贝塞尔曲线使用说明

1. 二次贝塞尔曲线和三次贝塞尔曲线
- 1.1 贝塞尔曲线的基本知识
- 1.2 贝塞尔曲线生成动图
- 1.3 HTML 中画贝塞尔曲线的 2 种方法
- 1.4 二次贝塞尔曲线
- - 1.4.1 二次贝塞尔曲线的创建
  - 1.4.2 二次贝塞尔曲线的弯曲处宽窄控制
  - 1.4.3 二次贝塞尔曲线的伸缩和平移
  - 1.4.4 二次贝塞尔曲线控制点的取值和弯曲方向
  - 1.4.5 二次贝塞尔曲线使用示例
- 1.5 三次贝塞尔曲线
- - 1.5.1 三次贝塞尔曲线的生成动图和创建
  - 1.5.2 三次贝塞尔曲线的起始点
  - 1.5.3 三次贝塞尔曲线的弯曲处的宽窄控制
  - 1.5.4 三次贝塞尔曲线弯曲处的拉伸
  - 1.5.5 三次贝塞尔曲线的控制点的坐标取值
♣ 结束语和友情链接

1. 二次贝塞尔曲线和三次贝塞尔曲线

1.1 贝塞尔曲线的基本知识

贝塞尔曲线的基本知识
- ① 贝塞尔曲线本质: Bézier curve (贝塞尔曲线)= 曲线 = 用于二维图
  - 应用于二维图形应用程序的数学曲线。
- ② 曲线定义：起始点、终止点（也称锚点）、控制点。
- ③ 调整曲线形状: 调整控制点起始点.终点的坐标值 = 调整曲线形状
  - 通过调整控制点，贝塞尔曲线的形状会发生变化。
- ④ 贝塞尔曲线名称由来: 1962年，法国数学家 Pierre Bézier 第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照公式绘的曲线就用他的姓氏来命名.
- 参考博文
  - 贝塞尔曲线讲解 1
  - 贝塞尔曲线讲解 2 - 数学原理

1.2 贝塞尔曲线生成动图

贝塞尔曲线生成动图
- ① 一阶(一次)贝塞尔曲线( = 线段)：
- ② 二次贝塞尔曲线( = 抛物线)
- ③ 三次贝塞尔曲线( = 类似抛物线的圆滑曲线)

1.3 HTML 中画贝塞尔曲线的 2 种方法

画贝塞尔曲线的 2 种方法
- ① 二次贝塞尔曲线: = 1个控制点 + 1个结束点
  - 使用 quadraticCurveTo(cp1x, cp1y, x, y)二次贝塞尔曲线到点方法
    - quadratic [kwɑ’drætɪk] adj. [数] 二次的
    - 参数: (cp1x,cp1y) = 1个控制点，(x,y) = 1个结束点。
      - cp=control point ,控制点
- ② 三次贝塞尔曲线: = 2个控制点 + 1个结束点
  - 使用bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)三次贝塞尔曲线到点方法
  - 参数: (cp1x,cp1y) = 控制点一，(cp2x,cp2y) = 为控制点二，(x,y)= 1个结束点。

1.4 二次贝塞尔曲线

1.4.1 二次贝塞尔曲线的创建

示例1: 创建一条简单的二次贝塞尔曲线

<body><canvas id="myCanvas" height="200px" width="200px" style="border:1px solid green">一条 二次 贝塞尔曲线</canvas><script type="text/javascript">var canvas=document.getElementById("myCanvas");//获取 canvas 图形画布元素if(canvas.getContext){//判断canvas 的获取上下文方法是否存在var ctx=canvas.getContext("2d");//获取上下文//(1) 绘制一条简单的 二次贝塞尔曲线: 1个起点+1个终点+1个控制点        ctx.beginPath();ctx.moveTo(75,25);ctx.quadraticCurveTo(25,25,25,60);ctx.stroke();     } </script>
</body>

1 条贝塞尔曲线	起点和终点

测试
- 显示曲线: 二次贝塞尔曲线,显示一段起始点到终点的曲线
- 曲线弯曲方向: 控制点不会显示出来,曲线弯曲方向,朝向控制点的坐标位置
  - 改变曲线方向 = 改变控制点的坐标 (不改变起始点和终点时)
- 改变曲线的形状: 改变起始点,终点,控制点坐标,都可以改变曲线的形状

示例2: 上方曲线,把控制点坐标变成(10,10)和(100,100),看曲线弯曲方向的变化

测试
- 弯曲方向:朝向控制点

1.4.2 二次贝塞尔曲线的弯曲处宽窄控制

示例1:
- (二次贝塞尔曲线) 弯曲处的宽窄控制:控制点坐标不变,改变起始点和终点的坐标
  - ① 弯曲处变宽: = 增加坐标差 a,b (起始点和终点的坐标差)
    - (假设起始点和终点之间的坐标差,a=x1-x2,b=y1-y2,两个点,x1,x2之间距离变远,y1和y2之间距离变远)
    - 改坐标值: 大大小小 (把较大值加大,较小值减小,增加距离)
  - ②弯曲处变窄: 缩小坐标差 a,b (起始点和终点的坐标差)
    - (假设起始点和终点之间的坐标差,a=x1-x2,b=y1-y2) ,x1和x2之间距离越来越靠近,y1和y2 之间的距离变近
    - 改坐标值:大小小大 (把较大值减小,较小值加大,减少距离)

<body><canvas id="myCanvas" height="200px" width="200px" style="border:1px solid green">一条 二次 贝塞尔曲线</canvas><script type="text/javascript">var canvas=document.getElementById("myCanvas");//获取 canvas 图形画布元素if(canvas.getContext){//判断canvas 的获取上下文方法是否存在var ctx=canvas.getContext("2d");//获取上下文//(1) 绘制一条简单的 二次贝塞尔曲线: 1个起点+1个终点+1个控制点        ctx.beginPath();ctx.moveTo(80,50);ctx.quadraticCurveTo(15,75,110,100);ctx.stroke();     } </script>
</body>

测试
- 一条二次贝塞尔曲线,下面对它进行变宽和变窄

⑴ 弯曲处变宽: = 增加坐标差 a,b (起始点和终点的 x坐标差,y坐标差)
- 口诀:大大小小 (大大小小变宽了)

左右变宽: 增大较大的x横坐标	左右变宽: 减小较小的x横坐标

上下变宽: 增大较大的y横坐标	上下变宽: 减小较小的y横坐标

⑵ 弯曲处变窄: 缩小坐标差 a,b (起始点和终点的 x坐标差,y坐标差)
- 口诀:大小小大

左右变窄: 增大较小的x横坐标	左右变窄: 减小较大的x横坐标

上下变窄: 增大较小的y横坐标	上下变窄: 减小较大的y横坐标

1.4.3 二次贝塞尔曲线的伸缩和平移

⑴ 二次贝塞尔曲线的伸缩: 两点和控制点的坐标差
- 伸长曲线: 增加两点和控制点的坐标差 (起始点和终点,和控制点的坐标差)
  - a1=x1-cp1x,a2=x2-cp1x,b1=y1-cp1y,b2=y2-cp1y)
  - (a1,b1)=起始点-控制点
  - (a2,b2)=终点-控制点
- 缩短曲线:减少两点和控制点的坐标差
- 伸缩方向: 伸缩左右方向,改x,伸缩上下方向,改y
① 伸长曲线: 伸长左右方向和伸长上下方向 = 增加两点和控制点的坐标差

左右伸长:改起始点 x坐标值	左右伸长:改终点 x坐标值

上下伸长:改起始点 y坐标值	上下伸长:改终点 y坐标值

② 缩短曲线: 缩短左右方向和缩短上下方向 = 减少两点和控制点的坐标差
- 与伸长曲线操作相反,让两点和控制点的距离变近

左右缩短:改 x坐标值 (起始点和终点)	上下缩短: 改 y坐标值 (起始点和终点)

⑵ 二次贝塞尔曲线的平移
- 两点的x或y,同时增减相同值 a
  - 左右平移: 改x值,起始点和终点,同时加减 a (y坐标值保持不动)
  - 上下平移: 改y值,起始点和终点,同时加减 a (x坐标值保持不动)
- 总结: 平移的时候,一次只改x坐标值或是y坐标值 (两个点一起增减相同值)

左右平移	上下平移

1.4.4 二次贝塞尔曲线控制点的取值和弯曲方向

二次贝塞尔曲线控制点的取值和弯曲方向
- ① 向左右弯曲: 改控制点 x值 (相对于起始点和终点的连线) 起始点(x1,y1),终点(x2,y2),控制点(cp1x,cp1y)
  - 向左弯曲: = 弯曲处在左边
    - cp1x < min (x1,x2) = 小于最小x值
  - 向右弯曲: = 弯曲处在右边
    - cp1x > max(x1.x2) = 大于最大x值
- ② 向上下弯曲: 改控制点 y值
  - 向上弯曲: cp1y < min (y1,y2) = 小于最小y值
  - 向下弯曲: cp1y > max(y1.y2) 大于最大y值

向左弯曲	向右弯曲

向上弯曲	向下弯曲

1.4.5 二次贝塞尔曲线使用示例

示例1: 多段二次贝塞尔曲线的使用: 添加连续的曲线,让每两条二次贝塞尔曲线相连,组成一个绘画气泡窗口

<body><canvas id="myCanvas" height="200px" width="200px" style="border:1px solid green">一个对话气泡图形</canvas><script type="text/javascript">var canvas=document.getElementById("myCanvas");//获取 canvas 图形画布元素if(canvas.getContext){//判断canvas 的获取上下文方法是否存在var ctx=canvas.getContext("2d");//获取上下文//(1) 绘制 1个对话气泡,6条曲线组成     ctx.beginPath();ctx.moveTo(75,25);ctx.quadraticCurveTo(25,25,25,60);//控制点1 和终点1,1段曲线ctx.quadraticCurveTo(20,100,50,100);//控制点2 和终点2,2段曲线ctx.quadraticCurveTo(50,125,25,120);//控制点3 和终点3,3段曲线ctx.quadraticCurveTo(70,125,68,100);//控制点4 和终点4,4段曲线ctx.quadraticCurveTo(165,115,152,50);//控制点5 和终点5,5段曲线ctx.quadraticCurveTo(152,20,75,25);//控制点6 和终点6 = 起始点1,6段曲线ctx.stroke();//绘制图形     } </script>
</body>

使用 quadraticCurveTo()二次贝塞尔曲线到点函数,实现对话气泡的过程
- 6个函数 = 6条曲线

1条贝塞尔曲线 ↓	起点和终点

2条贝塞尔曲线 (连接在一起) ↓	起点和终点

3条贝塞尔曲线 ↓	起点和终点

4条贝塞尔曲线 ↓	起点和终点

5条贝塞尔曲线 ↓	起点和终点

6 条贝塞尔曲线 (对话气泡)↓	起点和终点

测试
- 绘制过程显示: 在绘制过程中,先把stoke()绘画方法写在后面,这样每画一条曲线,都能看见,利于调整形状
- 坐标调整: 对于起始点,终点,控制点的坐标调整
  - 上下移动: 调整 y 值
  - 左右移动: 调整 x 值
  - 控制点相对于终点和起始点的位置进行限定
- 起始点
  - 曲线第1个起始点: 使用 moveTo()移动到点函数创建
  - 曲线接下来的起始点: 上一条曲线的终点 = 下一条曲线的起始点
- 弯曲处: 一条二次贝塞尔曲线,只有一个弯曲方向 = 只有一个弯曲处 (一般看有几个弯曲,就需要用几条曲线)
  - 弯曲处是平滑的: 不平滑的连接处,一般是终点位置,不会是控制点的坐标
  - 曲线弯曲方向: 朝向控制点的坐标
  - 曲线的数目: = quadraticCurveTo()二次赛贝尔曲线到点方法的使用数目

示例2: 对话气泡,6个弯曲处,所以用函数表示时,6个弯曲处 = 6条曲线 = 6个quadraticCurveTo()函数

示例3: 用二次贝塞尔曲线画一个心形

<body><canvas id="myCanvas" height="200px" width="200px" style="border:1px solid green">心形</canvas><script type="text/javascript">var canvas=document.getElementById("myCanvas");//获取 canvas 图形画布元素if(canvas.getContext){//判断canvas 的获取上下文方法是否存在var ctx=canvas.getContext("2d");//获取上下文//(1) 绘制 一个心形    ctx.beginPath();ctx.moveTo(80,80);ctx.quadraticCurveTo(22,40,35,100);//控制点1 和终点1,1段曲线ctx.quadraticCurveTo(42,122,80,140);//控制点2 和终点2,2段曲线ctx.quadraticCurveTo(120,122,122,100);//控制点3 和终点3,3段曲线         ctx.quadraticCurveTo(140,40,80,80);//控制点4 和终点4,4段曲线 ctx.stroke();//绘制图形     } </script>
</body>

用 2条曲线和 4条曲线绘制出心形
- 多两条曲线,多弯曲度的调整,更精细些

2条二次贝塞尔曲线 (心形♡) ↓	起始点和终点

4条二次贝塞尔曲线 (心形♡) ↓	起始点和终点

测试
- 弯曲度调整: 适当增加曲线数目,有利于调整图形的弯曲度

示例4: 把描边心形,变成填充心形
- 把 ctx.stroke()绘制方法换成 ctx.fill()填充方法,会自动填充成黑色

1.5 三次贝塞尔曲线

1.5.1 三次贝塞尔曲线的生成动图和创建

三次贝塞尔曲线形成动图
示例1: 一条三次贝塞尔曲线

<body><canvas id="myCanvas" height="200px" width="200px" style="border:1px solid green">一条 三次贝塞尔曲线</canvas><script type="text/javascript">var canvas=document.getElementById("myCanvas");//获取 canvas 图形画布元素if(canvas.getContext){//判断canvas 的获取上下文方法是否存在var ctx=canvas.getContext("2d");//获取上下文//(1) 绘制 一条三次贝塞尔曲线ctx.beginPath();ctx.moveTo(80,80);ctx.bezierCurveTo(60,30,40,80,80,100);ctx.stroke();//绘制图形     } </script>
</body>

1条三次贝塞尔曲线	起始点,终点和控制点	起始点,终点和控制点连线

示例2: 用 2条三次贝塞尔曲线,画 1个描边心形

<body><canvas id="myCanvas" height="200px" width="200px" style="border:1px solid green">心形</canvas><script type="text/javascript">var canvas=document.getElementById("myCanvas");//获取 canvas 图形画布元素if(canvas.getContext){//判断canvas 的获取上下文方法是否存在var ctx=canvas.getContext("2d");//获取上下文//(1) 绘制 一个心形    ctx.beginPath();ctx.moveTo(80,75);ctx.bezierCurveTo(60,35,25,80,80,100);ctx.bezierCurveTo(140,65,85,40,80,75);ctx.stroke();//绘制图形     } </script>
</body>

2条三次贝塞尔曲线 (心形)	起始点和终点

1.5.2 三次贝塞尔曲线的起始点

三次贝塞尔曲线的起始点
- 第一条曲线的起始点: 用moveTo()移动到点方法设置的起始点
- 接下来的起始点: = 前一条曲线的终点 = 下一条曲线的起始点

1.5.3 三次贝塞尔曲线的弯曲处的宽窄控制

⑴ 弯曲处的宽窄: 改 2 控制点的坐标差,增大或缩小
- = 控制点之间的 x 坐标差和 y 坐标差(横坐标和纵坐标)
- ① 曲线弯曲处变窄: = 缩小控制点坐标差
  - 两个 x 横坐标值越接近( cp1x-cp2x ) = 两个 y 纵坐标值越接近( cp1y-cp2y ) = 曲线弯曲处的两条边之间的距离越小
  - 缩小控制点坐标差的方法: 较小坐标变大,较大坐标变小,缩短距离 = 2个坐标值距离越来越接近
    - 改变x值,左右变窄
    - 改变y值,上下变窄
- ② 曲线弯曲处变宽: = 增大控制点坐标差 = 2 个坐标值距离越来越远

⑵ 把弯曲处变宽或变窄的示例说明
示例1: 把弯曲处变窄 = 减少坐标差 (控制点的x,y值)
- 减变窄:大小小大(大的变小,小的变大) = 2 个值越来越接近
- 左右变窄 = 减少控制点 x横坐标差:把第一条三次贝塞尔曲线的(控制点1 和控制点2 之间的) x 横坐标差缩小(通过增大较小x坐标值,或者减小较大的x坐标值,两个越来越接近)
- 上下变窄 = 减少控制点的 y纵坐标差:把第一条三次贝塞尔曲线的(控制点1 和控制点2 之间的) y 纵坐标差缩小(通过增大较小 y坐标值,减小较大的 y坐标值)

左右变窄: 大小= 增大较小的 x坐标值	左右变窄: 小大= 减小较大的 x的坐标值

上下变窄: 大小= 增大较小的 y坐标值	上下变窄: 小大= 减小较大的 y坐标值

示例2: 把弯曲处变宽 = 增加坐标差 (控制点的x,y值)
- 变宽: = 增加坐标差= 大大小小(大的变大,小的变小)
- 下方图片,每次增减10px,增减几次

左右变宽: 大大= 增大较大的 x坐标值	左右变宽: 小小= 减小较小的 x的坐标值

上下变宽: 大大= 增大较大的 y坐标值	上下变窄: 小小= 减小较小的 y坐标值

1.5.4 三次贝塞尔曲线弯曲处的拉伸

⑴ 曲线弯曲处拉伸: = 2 控制点,同时改x值,或y值,改的值相同
- = (改的值相同,坐标差不变)
- ① 曲线弯曲处向左右拉伸: = 2 个控制点同时改 x值,改的值相同,y 值不动
  - 2 个控制点的纵坐标不变
    - (纵坐标改变,会改变上下拉伸)
  - 横坐标差也不变
    - (坐标差改变会改变弯曲处的宽窄度)
  - 把 cp1x 和 cp2x 横坐标减少 a (同时减少相同值 a)
- ② 曲线弯曲处向上下拉伸: 2个控制点同时改y值,改的值相同,x值不动
  - 保持坐标差不变(不从控制点上改变宽窄),拉伸宽窄改变= 由和起始点终点之间的相对距离改变
- 总结:
  - 弯曲处宽窄 = 增减 2 个控制点的坐标差
    - (变窄= 减坐标差,变宽= 增坐标差 )
  - 弯曲处拉伸 = 同时改2个控制点的x值,或y值, 改的值相同.(一次只改 2 个 x值,或只改 2 个y值)
  - 宽窄和拉伸方向: 左右:改 x,上下: 改 y值

⑵ 三次贝塞尔曲线的弯曲处上下左右拉伸的示例
示例1:左右上下拉伸图形
- 曲线弯曲处向左右拉伸: = 同时增减 2个x 值,改的值都为 a ,y值不动.
- 曲线弯曲处向上下拉伸: = 同时增减 2个y 值,改的值都为 a ,y值不动.

向左拉伸: cp1x,cp2x 同时减 a(坐标差不变)	向右拉伸: cp1x,cp2x 同时加 a(坐标差不变)

向上拉伸: cp1y,cp2y 同时减 a(坐标差不变)	向下拉伸: cp1y,cp2y 同时加 a(坐标差不变)

⑶ 曲线左右拉伸和控制线段的关系:
- 控制线段的左右平移 = 保持纵坐标不变,横坐标差也不变,横坐标同时增减 a(针对2个控制点) = 控制点P0,P1之间的线段,向左右平移 a 距离

控制线段P0P1 向左平移 = 同时减少横坐标(纵坐标不变减少相同量a)

1.5.5 三次贝塞尔曲线的控制点的坐标取值

控制点的坐标取值
- 弯曲处方向,在左上方: (相对于起始点和终点之间的连接线段)
  - cp1x和cp2x < min (起始点x,终点x)
  - cp1y和cp2y < min (起始点y,终点y)
- 弯曲处方向,在右上方
  - cp1x和cp2x > max (起始点x,终点x)
  - cp1y和cp2y < min (起始点y,终点y)
- 弯曲处方向,在右下方
  - cp1x和cp2x > max (起始点x,终点x)
  - cp1y和cp2y > max (起始点y,终点y)
- 弯曲处方向,在左下方
  - cp1x和cp2x < min (起始点x,终点x)
  - cp1y和cp2y > max (起始点y,终点y)

弯曲处于左上方	弯曲处于右上方

弯曲处于右下方	弯曲处于左下方

总结:控制点取值和弯曲处位置关系(相对于开始点和终点之间的线段,要先确定起始点和终点坐标)
- ① 弯曲处的左右控制:
  - 向左弯曲: = 弯曲处在左边= 小于 x最小值
    - 控制点的横坐标 ,要小于起始点和终点的横坐标,距离越远,拉伸越长
    - cp1x和cp2x < min (起始点x,终点x) ,小于 x最小值
  - 向右弯曲: = 弯曲处在右边 = 大于 x最大值
    - 控制点的横坐标,要大于起始点和终点的横坐标,距离越远,拉伸越长
    - cp1x和cp2x > max (起始点x,终点x) ,大于 x最大值
- ② 弯曲处的上下控制:
  - 向上弯曲: = 弯曲处在上方 = 小于 y最小值
    - cp1y和cp2y < min (起始点y,终点y) ,小于 y最小值
  - 向下弯曲: = 弯曲处在下方 = 大于 y最大值
    - cp1y和cp2y > max (起始点y,终点y) = 大于 y最大值

♣ 结束语和友情链接

参考文档
- W3School 教程
- MDN HTML 教程

友情链接
- ① 【HTML 标签的参考列表 (按字母排列)】
- ② 【HTML 标签的参考列表 (按功能分类排列)】

支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
- 可以备注支持的理由或想对作者说的话哦~
赞助二维码:

感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
欢迎指正: 如果发现有需要更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

转载请注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/90044515
- 版权声明：本文为博主原创文章，转载请附上博文链接！

【HTML 中的二次贝塞尔曲线和三次贝塞尔曲线】(使用说明详解)相关推荐

一文速学数模-时序预测模型(四)二次指数平滑法和三次指数平滑法详解+Python代码实现
目录前言二次指数平滑法(Holt's linear trend method) 1.定义 2.公式二次指数平滑值: 二次指数平滑数学模型: 3.案例实现三次指数平滑法(Holt-Winters ...
二次贝塞尔曲线转换为三次贝塞尔曲线
二次贝塞尔曲线转换为三次贝塞尔曲线在使用cairo绘图的时候,发现cairo不支持二次贝塞尔曲线的绘制,为了与QT实现的canvas的行为一致,cairo必须同样实现二次贝塞尔曲线的绘制.思路是将二 ...
opengl绘制三次hermite曲线，三次cardinal曲线
引言上篇上一篇绘制了最基础插值曲线,讲到除了插值经过给定点之外,还有别的约束条件.有时为了所得曲线在端点处具有给定的N阶导数,亦即所称的参数连续性条件和几何连续性条件,给约束矩阵添加了导数约束. ...
作为SLAM中最常用的闭环检测方法，视觉词袋模型技术详解来了
摘自:https://mp.weixin.qq.com/s/OZnnuA31tEaVt0vnDOy5hQ 作为SLAM中最常用的闭环检测方法,视觉词袋模型技术详解来了原创小翼飞思实验室今天基 ...
python中search和match的区别_Python中正则表达式match()、search()函数及match()和search()的区别详解...
match()和search()都是python中的正则匹配函数,那这两个函数有何区别呢? match()函数只检测RE是不是在string的开始位置匹配, search()会扫描整个string查找 ...
linux上传文件命令ftp put,Linux ftp 命令行中下载文件get与上传文件put的命令应用详解...
介绍:从本地以用户anok登录的机器192.168.0.16上通过ftp远程登录到192.168.0.6的ftp服务器上,登录用户名是peo.以下为使用该连接做的实验. 查看远程ftp服务器上用户pe ...
中科大-计算机类考研真题（初试笔试真题详解+复试笔试机试真题详解+面试问题汇总分析）
中科大-计算机类考研真题(初试笔试真题详解+复试笔试机试真题详解+面试问题汇总分析) 初试笔试真题2003年~2019年:答案+详解复试面试问题总结:问题汇总+详解分析复试面试经验总结:个人小结 ...
linux get与put,科技常识：Linux ftp 命令行中下载文件get与上传文件put的命令应用详解...
今天小编跟大家讲解下有关Linux ftp 命令行中下载文件get与上传文件put的命令应用详解 ,相信小伙伴们对这个话题应该也很关注吧,小编也收集到了有关Linux ftp 命令行中下载文件get与 ...
气缸标识上vr什么意思_发动机结构代号中L、V、W都是啥意思？图文详解让你不再迷糊...
发动机结构代号中L.V.W都是啥意思?图文详解让你不再迷糊大家经常能看到L4.V6.W8这样的发动机结构代号,小编今天就用超高清的结构图告诉你这些代号都是什么鬼? 01 直列式(L)发动机直列式发动机 ...

【HTML 中的二次贝塞尔曲线和三次贝塞尔曲线】(使用说明详解)

二次贝塞尔曲线和三次贝塞尔曲线使用说明

1. 二次贝塞尔曲线和三次贝塞尔曲线

1.1 贝塞尔曲线的基本知识

1.2 贝塞尔曲线生成动图

1.3 HTML 中画贝塞尔曲线的 2 种方法

1.4 二次贝塞尔曲线

1.4.1 二次贝塞尔曲线的创建

1.4.2 二次贝塞尔曲线的弯曲处宽窄控制

1.4.3 二次贝塞尔曲线的伸缩和平移

1.4.4 二次贝塞尔曲线控制点的取值和弯曲方向

1.4.5 二次贝塞尔曲线使用示例

1.5 三次贝塞尔曲线

1.5.1 三次贝塞尔曲线的生成动图和创建

1.5.2 三次贝塞尔曲线的起始点

1.5.3 三次贝塞尔曲线的弯曲处的宽窄控制

1.5.4 三次贝塞尔曲线弯曲处的拉伸

1.5.5 三次贝塞尔曲线的控制点的坐标取值

♣ 结束语和友情链接

【HTML 中的二次贝塞尔曲线和三次贝塞尔曲线】(使用说明详解)相关推荐

最新文章

热门文章

【HTML 中的二次贝塞尔曲线 和三次贝塞尔曲线】(使用说明详解)

二次 贝塞尔曲线 和三次 贝塞尔曲线 使用说明

1. 二次 贝塞尔曲线 和三次 贝塞尔曲线

1.1 贝塞尔曲线的 基本知识

1.2 贝塞尔曲线 生成动图

1.3 HTML 中 画贝塞尔曲线的 2 种方法

1.4 二次 贝塞尔曲线

1.4.1 二次 贝塞尔曲线的创建

1.4.2 二次 贝塞尔曲线的 弯曲处宽窄控制

1.4.3 二次 贝塞尔曲线的 伸缩和平移

1.4.4 二次 贝塞尔曲线 控制点的取值 和弯曲方向

1.4.5 二次 贝塞尔曲线 使用示例

1.5 三次 贝塞尔曲线

1.5.1 三次 贝塞尔曲线的 生成动图和创建

1.5.2 三次 贝塞尔曲线的 起始点

1.5.3 三次 贝塞尔曲线的 弯曲处的 宽窄控制

1.5.4 三次 贝塞尔曲线 弯曲处的 拉伸

1.5.5 三次 贝塞尔曲线的 控制点的 坐标取值

♣ 结束语 和 友情链接

【HTML 中的二次贝塞尔曲线 和三次贝塞尔曲线】(使用说明详解)相关推荐

最新文章

热门文章

【HTML 中的二次贝塞尔曲线和三次贝塞尔曲线】(使用说明详解)

二次贝塞尔曲线和三次贝塞尔曲线使用说明

1. 二次贝塞尔曲线和三次贝塞尔曲线

1.1 贝塞尔曲线的基本知识

1.2 贝塞尔曲线生成动图

1.3 HTML 中画贝塞尔曲线的 2 种方法

1.4 二次贝塞尔曲线

1.4.1 二次贝塞尔曲线的创建

1.4.2 二次贝塞尔曲线的弯曲处宽窄控制

1.4.3 二次贝塞尔曲线的伸缩和平移

1.4.4 二次贝塞尔曲线控制点的取值和弯曲方向

1.4.5 二次贝塞尔曲线使用示例

1.5 三次贝塞尔曲线

1.5.1 三次贝塞尔曲线的生成动图和创建

1.5.2 三次贝塞尔曲线的起始点

1.5.3 三次贝塞尔曲线的弯曲处的宽窄控制

1.5.4 三次贝塞尔曲线弯曲处的拉伸

1.5.5 三次贝塞尔曲线的控制点的坐标取值

♣ 结束语和友情链接

【HTML 中的二次贝塞尔曲线和三次贝塞尔曲线】(使用说明详解)相关推荐