精华内容
下载资源
问答
  • 贝塞尔曲线 和三 贝塞尔曲线1.1 贝塞尔曲线的 基本知识1.2 贝塞尔曲线 生成动图1.3 HTML 中 画贝塞尔曲线的 2 种方法1.4 二 贝塞尔曲线 使用1.4.1 二 贝塞尔曲线的创建1.4.2 二 贝塞尔曲线的 弯曲处...

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

    1.1 贝塞尔曲线的 基本知识

    • 贝塞尔曲线的 基本知识
      • 贝塞尔曲线本质: Bézier curve (贝塞尔曲线)= 曲线 = 用于二维图

        • 应用于二维图形应用程序的数学曲线。
      • 曲线定义:起始点、终止点(也称锚点)、控制点。

      • 调整曲线形状: 调整控制点起始点.终点的坐标值 = 调整曲线形状

        • 通过 调整控制点,贝塞尔曲线的形状 会发生变化。
      • 贝塞尔曲线名称由来: 1962年,法国数学家 Pierre Bézier 第一个研究了这种 矢量绘制曲线 的方法,并给出了详细的计算公式,因此按照公式 绘的曲线 就用他的姓氏 来命名.

      • 参考博文


    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最大值


    ♣ 结束语 和 友情链接



    • 支持作者: 持续更新中,❤ 您的每一分赞助,让作者走得更远。
      • 可以备注 支持的理由 或 想对作者说的话哦~
        在这里插入图片描述
    • 赞助二维码:
      在这里插入图片描述

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

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

    在这里插入图片描述

    展开全文
  • 本文实例为大家分享了js Canvas实现二次贝塞尔曲线的具体代码,供大家参考,具体内容如下先上效果图:实现代码:二次贝塞尔曲线body, h1{margin:0;}canvas{margin: 20px; }二次贝塞尔曲线/*** @param sx 起始点x坐标...

    本文实例为大家分享了js Canvas实现二次贝塞尔曲线的具体代码,供大家参考,具体内容如下

    先上效果图:

    3ba62acd3000b153ee2f3cd4e0a269f2.png

    实现代码:

    二次贝塞尔曲线

    body, h1{margin:0;}

    canvas{margin: 20px; }

    二次贝塞尔曲线

    /**

    * @param sx 起始点x坐标

    * @param sy 起始点y坐标

    * @param ex 结束点x坐标

    * @param ey 结束点y坐标

    * @param cx 控制点x坐标

    * @param cy 控制点y坐标

    * @param part 将起始点到控制点的线段分成的份数,数值越高,计算出的曲线越精确

    */

    function draw(sx, sy, ex, ey, cx, cy, part) {

    var canvas = document.getElementById('canvas');

    var ctx = canvas.getContext('2d');

    //绘制起始点、控制点、终点

    ctx.beginPath();

    ctx.moveTo(sx, sy);

    ctx.lineTo(cx, cy);

    ctx.lineTo(ex, ey);

    ctx.stroke();

    // 绘制二次贝塞尔曲线

    ctx.beginPath();

    ctx.moveTo(sx, sy);

    // 起始点到控制点的x和y每次的增量

    var changeX1 = (cx - sx) / part;

    var changeY1 = (cy - sy) / part;

    // 控制点到结束点的x和y每次的增量

    var changeX2 = (ex - cx) / part;

    var changeY2 = (ey - cy) / part;

    for(var i = 0; i < part; i++) {

    // 计算两个动点的坐标

    var qx1 = sx + changeX1 * i;

    var qy1 = sy + changeY1 * i;

    var qx2 = cx + changeX2 * i;

    var qy2 = cy + changeY2 * i;

    // 计算得到此时的一个贝塞尔曲线上的点坐标

    var bx = qx1 + (qx2 - qx1) * i / part;

    var by = qy1 + (qy2 - qy1) * i / part;

    ctx.lineTo(bx, by);

    }

    ctx.stroke();

    }

    window.onload = function () {

    draw(0, 0, 600, 0, 150, 450, 100);

    };

    上面的是静态的,来个动态的看一看:

    二次贝塞尔曲线

    body, h1{margin:0;}

    canvas{margin: 20px; }

    二次贝塞尔曲线

    /**

    * @param sx 起始点x坐标

    * @param sy 起始点y坐标

    * @param ex 结束点x坐标

    * @param ey 结束点y坐标

    * @param cx 控制点x坐标

    * @param cy 控制点y坐标

    * @param part 将起始点到控制点的线段分成的份数,数值越高,计算出的曲线越精确

    * @param interval 画图的间隔

    * @return function 调用一次就向后画一段曲线

    */

    function draw(sx, sy, ex, ey, cx, cy, part, interval) {

    var canvas = document.getElementById('canvas');

    var ctx = canvas.getContext('2d');

    //绘制起始点、控制点、终点

    ctx.beginPath();

    ctx.moveTo(sx, sy);

    ctx.lineTo(cx, cy);

    ctx.lineTo(ex, ey);

    ctx.stroke();

    // 绘制二次贝塞尔曲线

    ctx.beginPath();

    ctx.moveTo(sx, sy);

    // 起始点到控制点的x和y每次的增量

    var changeX1 = (cx - sx) / part;

    var changeY1 = (cy - sy) / part;

    // 控制点到结束点的x和y每次的增量

    var changeX2 = (ex - cx) / part;

    var changeY2 = (ey - cy) / part;

    // 上次的点坐标

    var lastX = sx;

    var lastY = sy;

    var i = 0;

    return function () {

    // 计算两个动点的坐标

    var qx1 = sx + changeX1 * i;

    var qy1 = sy + changeY1 * i;

    var qx2 = cx + changeX2 * i;

    var qy2 = cy + changeY2 * i;

    // 计算得到此时的一个贝塞尔曲线上的点

    var bx = qx1 + (qx2 - qx1) * i / part;

    var by = qy1 + (qy2 - qy1) * i / part;

    // 从上次的点继续画

    ctx.beginPath();

    ctx.moveTo(lastX, lastY);

    ctx.lineTo(bx, by);

    ctx.stroke();

    // 保存点坐标

    lastX = bx;

    lastY = by;

    i += 1;

    if (i < part) {

    setTimeout(arguments.callee, interval);

    }

    }

    }

    window.onload = function () {

    var display = draw(0, 0, 600, 0, 150, 450, 200, 50);

    display();

    };

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 从当前笔位置到由指定的结束点绘制的二次贝塞尔曲线x,并y使用由指定的控制点cp1x和cp1y。 例子: 此示例显示了如何绘制二次贝塞尔曲线。 <!DOCTYPE html> <html> <head> <meta charset=...

    贝塞尔曲线和二次曲线

    贝塞尔曲线大概就是ps中钢笔工具那个曲线

    quadraticCurveTo(cp1x, cp1y, x, y)

    从当前笔位置到由指定的结束点绘制的二次贝塞尔曲线x,并y使用由指定的控制点cp1xcp1y

    在这里插入图片描述

    例子:

    此示例显示了如何绘制二次贝塞尔曲线。

    
      
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
       
    </head>
    
    <body onload="draw();">
        <canvas id="canvas" width="400" height="400"></canvas>
    </body>
     <script type="application/javascript">
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    //贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(50, 20);
    ctx.quadraticCurveTo(230, 30, 50, 100);
    ctx.stroke();
    
    // 起点和终点
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(50, 20, 5, 0, 2 * Math.PI);   //起始点
    ctx.arc(50, 100, 5, 0, 2 * Math.PI);  // 终点
    ctx.fill();
    
    // 控制点
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(230, 30, 5, 0, 2 * Math.PI);
    ctx.fill();
        </script>
    </html>
    

    效果图:

    在这里插入图片描述

    二次贝塞尔曲线

    语法:

    void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
    
    cp1x
    

    第一个控制点的x轴坐标。

    cp1y
    

    第一个控制点的y轴坐标。

    cp2x
    

    第二个控制点的x轴坐标。

    cp2y
    

    第二个控制点的y轴坐标。

    x
    

    终点的x轴坐标。

    y
    

    终点的y轴坐标。

    案例:

    绘制一个三次贝塞尔曲线

    
      
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
       
    </head>
    
    <body onload="draw();">
        <canvas id="canvas" width="400" height="400"></canvas>
    </body>
     <script type="application/javascript">
    //定义画布和上下文
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    // 将点定义为{x,y}
    let start = { x: 50,    y: 20  };
    let cp1 =   { x: 230,   y: 30  };
    let cp2 =   { x: 150,   y: 80  };
    let end =   { x: 250,   y: 100 };
    
    // 三次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(start.x, start.y);
    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
    ctx.stroke();
    
    // 起始点和终止点
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // 起始点
    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // 终止点
    ctx.fill();
    
    // 控制点
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // 控制点一
    ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // 控制点二
    ctx.fill();
        </script>
    </html>
    

    效果图:

    在这里插入图片描述

    案例二:

    渲染语音气球

    
      
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
       
    </head>
    
    <body onload="draw();">
        <canvas id="canvas" width="400" height="400"></canvas>
    </body>
     <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
    
        // 二次贝塞尔曲线案例
        ctx.beginPath();
        ctx.moveTo(75, 25);
        ctx.quadraticCurveTo(25, 25, 25, 62.5);
        ctx.quadraticCurveTo(25, 100, 50, 100);
        ctx.quadraticCurveTo(50, 120, 30, 125);
        ctx.quadraticCurveTo(60, 120, 65, 100);
        ctx.quadraticCurveTo(125, 100, 125, 62.5);
        ctx.quadraticCurveTo(125, 25, 75, 25);
        ctx.stroke();
      }
    }
        </script>
    </html>
    

    效果图:
    在这里插入图片描述

    展开全文
  • 绘制二次贝塞尔曲线,cp1x,cp1y为个控制点,x,y为结束点。 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 绘制三次贝塞尔曲线,cp1x,cp1y为控制点,cp2x,cp2y为控制点二,x,y为结束点。 画个二次贝塞尔...

    方法说明

    quadraticCurveTo(cp1x, cp1y, x, y)
    绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点。


    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
    绘制三次贝塞尔曲线,cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。

     

    画一个二次贝塞尔曲线

    	window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    	    ctx.beginPath();
        	ctx.moveTo(100, 200);
    		ctx.quadraticCurveTo(100, 100, 230, 200);
    		ctx.stroke();
    	}

    画一个三次贝塞尔曲线

    
    	window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    	    ctx.beginPath();
        	ctx.moveTo(50, 200);
    		ctx.bezierCurveTo(100, 100,150,150, 230, 200);
    		ctx.stroke();
    	}

    画一个爱心

    	
    	window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    	    ctx.beginPath();
        	ctx.moveTo(150, 100);
    		ctx.bezierCurveTo(50,50,50,150, 150, 200);
    		ctx.moveTo(150, 100);
    		ctx.bezierCurveTo(250, 50,250,150, 150, 200);
    		ctx.fill();
    	}
    	

     

    展开全文
  • 贝塞尔曲线 贝塞尔曲线起始点和终止点在曲线上,方向控制点不再曲线上。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>初识贝塞尔曲线</title> <style>...
  • canvas笔记-二次贝塞尔曲线与三次贝塞尔曲线的用法

    千次阅读 多人点赞 2020-06-02 10:47:36
    首先是二次贝塞尔曲线! 函数是这样的 quadraticCurveTo(cpx,cpy,x,y); 其中cpx为贝塞尔控制点x; 其中cpy为贝塞尔控制点y; 其中x为结束点x坐标; 其中y为结束点y坐标。 这里隐藏了个开始点,一般用...
  • 二维二次贝塞尔曲线(QuadraticBezierCurve)创建条平滑的二维 二次贝塞尔曲线, 由起点、终点和个控制点所定义。示例var curve = new THREE.QuadraticBezierCurve(new THREE.Vector2( -10, 0 ),new THREE.Vector2...
  • 虽然三次贝塞尔曲线(CBS)在图形软件行业中大量使用,但它也可以用作灵活的函数逼近工具给出了正确的约束。 CBS软件包提供了种计算y值的方法给定适当约束的CBS曲线的ax值。 然后使用此方法来近似潜在效用在跨期...
  • 对于贝塞尔曲线而言,其特点在于第个控制点恰好是曲线的起点,最后个控制点是曲线的终点,其他控制点并不在曲线上,而是起到控制曲线形状的作用。另外,曲线的起点处与前两个控制点构成的线段相切,而曲线的终点...
  • 次贝塞尔曲线次贝塞尔曲线方程的个实现。 样本
  • "Funct_Bezier.m" 个函数,用于评估和绘制给定四个控制点和间隔的 2D 三次贝塞尔曲线。 利用霍纳规则进行高效计算。 给出了个简单的测试程序“TestCubicBezier.m”
  • 在下面两篇文章中我分别用贝塞尔曲线的定义公式和递推公式实现了贝塞尔曲线的...这里我们使用OpenGL中贝塞尔曲线函数实现贝塞尔曲线的绘制,另外可以让用户自己通过鼠标选择四个控制点,画三次贝塞尔曲线。 重要函...
  • 次贝塞尔曲线

    2018-06-28 00:24:00
    次贝塞尔曲线 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成, 节点是可拖动的支点,线段像...
  • SVG_38_path标签之字母Q---二次贝塞尔曲线 贝塞尔曲线百科 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由...
  • 上篇讲了三hermite曲线,三cardinal曲线的绘制,都需要用约束矩阵来求解曲线的系数,而贝塞尔曲线直接给出显式公式来绘制,只要给出几个控制点即可,贝塞尔曲线其实就是种加权混合的多项式,随着参数值的增加...
  • 在HTML5 Canvas中,可以用以下方法描画三阶和二阶的贝塞尔曲线:复制代码代码如下:context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)context.quadraticCurveTo(cpx, cpy, x, y)贝塞尔曲线是在二维平面上由个...
  • 以前不知道二次贝塞尔曲线和三次贝塞尔曲线,学习canvas时,canvas提供了两个方法来绘制这两条陌生的线。偶也是初次了解,不知道什么地方将来会用到,先分享了再说: 和以前一样,先建个canvas标签: 接下来又开始...
  • 问题:如何将个三阶贝塞尔曲线打断生成两个三阶贝塞尔曲线,生成的两条贝塞尔曲线与原来的贝塞尔曲线重合? 输入:贝塞尔曲线的四个控制点P1,C1,C2,P2,和个打断点E(E在曲线上) 输出:两条贝塞尔曲线: P1,F,I...
  • 贝塞尔曲线

    千次阅读 2018-01-09 10:32:37
    贝塞尔曲线(The Bézier Curves),是种在计算机图形学中相当重要的参数曲线(2D,3D的称为曲面)。 贝塞尔曲线于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所发表,他运用贝塞尔曲线来为汽车的主体...
  • 前段时间闲暇的时候看到贝塞尔曲线算法的文章,试着在小程序里去实现小程序的贝塞尔曲线算法,及其效果。 主要应用到的技术点: 1、小程序wxss布局,以及数据绑定 2、js二bezier曲线算法 核心算法,写在app.js...
  • 前段时间闲暇的时候看到贝塞尔曲线算法的文章,试着在小程序里去实现小程序的贝塞尔曲线算法,及其效果。 主要应用到的技术点: 1、小程序wxss布局,以及数据绑定 2、js二bezier曲线算法 核心算法,写在app.js...
  • 用TC生存二次贝塞尔曲线,其实稍微改一下就可以实现三次贝塞尔曲线的了。
  • 鼠标操作贝塞尔曲线

    千次阅读 2017-05-16 15:56:37
    1 贝塞尔曲线 贝塞尔曲线(The Bézier Curves),是一种在计算机图形学中相当重要的...接下来将从一次贝塞尔曲线开始(以下简称一次曲线. 类似的,N次贝塞尔曲线称为N次曲线),研究贝赛尔曲线的解析构造和原理。 1.
  • 次贝塞尔曲线公式

    2016-11-09 12:33:00
    n个数据点构成(n-1)次贝塞尔曲线,三个数据点构成二次贝塞尔曲线,二次贝塞尔曲线参数方程(1 - t)^2 P0 + 2 t (1 - t) P1 + t^2 P2;曲线起点P0,终点P2,但一般不过P1点. 代入坐标后得到:参数方程:x = (...
  • 应用贝塞尔曲线与NSTimer结合使用 制作动态进度条。 简单实用,易懂,易学习 贝塞尔一次二次曲线的简单绘制,应用。 供各位童鞋学习使用分享 Q:305814832 email:ioszhaoyi@163.com
  • 文章目录前言一、基本简介二、一些特点三、一个例子四、公式推导1、一次贝塞尔曲线2、二次贝塞尔曲线3、三次贝塞尔曲线4、四次贝塞尔曲线5、五次贝塞尔曲线一般公式五、一些实例一些建议总结 前言 贝塞尔曲线一直是...
  • 贝塞尔曲线在CSS动画中和canvas、svg绘图中都是比较重要的个东西!所以我来好好的小结一下关于它的一些东西。什么是贝塞尔曲线贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用...
  • 次贝塞尔曲线 在微信官方的二次贝塞尔曲线画法连接 画波浪 思路: 在屏幕左边画个波,然后让它一直向屏幕右边平移过去。其X的值由负数变为正数依次增大;然后一直重复此操作。 我画出来的波浪如下(感觉还是有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,352
精华内容 4,940
关键字:

一次贝塞尔曲线