老师关于贝塞尔曲线。

老师关于贝塞尔曲线。

完全不懂啊,老师能不能详细讲解一下。通俗详细的讲,他的规律运算,公式麻烦老师了

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

emmm……我们换个思路,这么来理解贝塞尔曲线:

在html5中,假设想要绘制一条二次贝塞尔曲线,则绘制方法为:

quadraticCurveTo(cpx,cpy,x,y)//cpx,cpy表示控制点的坐标, x,y表示终点坐标;

它的数学公式表示如下(可以忽略数学公式):

二次贝塞尔曲线的路径由给定点P0、P1、P2的函数B(t)追踪:

http://img1.sycdn.imooc.com//climg/5c0dfea60001067004370039.jpg

实例图:

http://img1.sycdn.imooc.com//climg/5c0dfebc0001e40103600150.jpg

代码案例:

http://img1.sycdn.imooc.com//climg/5c0dffee0001128a16380849.jpg

希望可以帮到你!

  • 慕神6715844 提问者 #1
    哈哈哈,老师辛苦了。?
    2018-12-10 21:09:25
卡布琦诺 2018-12-10 11:34:14

http://img1.sycdn.imooc.com//climg/5c0ddc140001d41401100027.jpg是一条抛物线上顺序三个不同的点。过http://img1.sycdn.imooc.com//climg/5c0ddc490001d0ab00250020.jpghttp://img1.sycdn.imooc.com//climg/5c0ddc5e00011b5500260019.jpg点的两切线交于http://img1.sycdn.imooc.com//climg/5c0ddc790001634a00240028.jpg点,在http://img1.sycdn.imooc.com//climg/5c0ddc8b0001767100330027.jpg点的切线交http://img1.sycdn.imooc.com//climg/5c0ddcac0001f81300370021.jpghttp://img1.sycdn.imooc.com//climg/5c0ddcc500011ccd00430020.jpghttp://img1.sycdn.imooc.com//climg/5c0ddce20001160600300027.jpghttp://img1.sycdn.imooc.com//climg/5c0ddd00000118a400300027.jpg,则如下比例成立:

http://img1.sycdn.imooc.com//climg/5c0ddc2900018c3903080094.jpg

这是所谓抛物线的三切线定理

http://img1.sycdn.imooc.com//climg/5c0ddd370001f5a303370199.jpg

当P0,P2固定,引入参数t,令上述比值为t:(1-t),即有:

http://img1.sycdn.imooc.com//climg/5c0ddd490001d0f901540087.jpg

http://img1.sycdn.imooc.com//climg/5c0dddda000190fb02170054.jpg

一阶贝塞尔曲线(线段):

http://img1.sycdn.imooc.com//climg/5c0dde070001b30e03160042.jpg

http://img1.sycdn.imooc.com//climg/5c0dde110001f3c403600150.jpg

意义:由 P0 至 P1 的连续点, 描述的一条线段

二阶贝塞尔曲线(抛物线):

http://img1.sycdn.imooc.com//climg/5c0dde2e00016f4404330032.jpg

http://img1.sycdn.imooc.com//climg/5c0dde410001e40103600150.jpg

原理:由 P0 至 P1 的连续点 Q0,描述一条线段。 
      由 P1 至 P2 的连续点 Q1,描述一条线段。 
      由 Q0 至 Q1 的连续点 B(t),描述一条二次贝塞尔曲线。

经验:P1-P0为曲线在P0处的切线。

三阶贝塞尔曲线:

http://img1.sycdn.imooc.com//climg/5c0dde570001100e05660032.jpg

http://img1.sycdn.imooc.com//climg/5c0dde6d000145d303600150.jpg

在前端开发中,对于贝塞尔曲线的使用,并不频繁,因此同学当做拓展知识了解即可

希望可以帮到你!

  • 提问者 慕神6715844 #1
    哈哈,一开始还看到懂后面蒙了,老师你能在通俗谅解一下吗?拿例子讲解。
    2018-12-10 11:59:40
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师