canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动


Posted in HTML / CSS onJanuary 10, 2018

写在最前

在之前的这篇文章中我们提到了对于贝塞尔公式的运用。本次分享一下如何推导贝塞尔公式以及附一个简单的?即小球跟随曲线轨迹运动。

效果预览

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

在本例中生成的曲线由以上文章中的源码提供。

贝塞尔曲线公式推导

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

上面这张图是贝塞尔曲线的完整公式,看起来一脸懵逼=。=,因为这是N阶的推导公式,本次我们以一二阶贝塞尔公式的推导来理解一下这个推导公式的由来。先来看下网上流传已久的几张贝塞尔动图:

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

在这三张图中最重要的部分是我们需要理解变量t。t的取值范围是0-1。从上面的gif中也可以看出来似乎曲线的绘制过程就是t从0到1的过程。嗯其实就是这样的。t的真实含义是什么呢?

在p0p1、p1p2、p2p3等等的起点到控制点再到终点的连线中,每段连线都被分割成了两部分(仔细看动图中的黑色、绿色、蓝色圆点),各段连线中两部分的比值都是相同的,比值范围是0到1,而这个比值就是t

来看下面的一阶贝塞尔曲线示意图:

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

pt是p0p1上的任意一点,p0pt / ptp1 = t。从而我们可以引出下面的推导

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

此时t为时间,v为速度。我们可以看做从p0到p1的距离等于固定速度乘以固定时间

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

故到p上某一点的时间为固定的速度乘以某个时间值。同时固定的速度已经已经可以表示为上面的推导公式。此时等式右边就形成了t(0,1) / t;即相当于某个时间值 / 固定时间值,即产生了我们一开始所强调的变量t,其取值范围为[0,1]。从而下面的等式也就比较好理解了。

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

至此一阶贝塞尔曲线我们已经推到了出来,其中变量为起点、终点与比值t。

那么二阶公式如何从一阶过渡过去呢?

来看下面这张图:

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

其中Pp(t)的经过路径就是我们所求的二阶贝塞尔曲线,那么其实我们也可以将其从一阶进行演变:

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

我们先将pa、pb两个点所连线段当做一阶曲线,之后再由两端一阶曲线分别表示pa、pb,最后就得到了我们的二阶曲线公式。仔细观察就能发现这和我们最初的完整公式是相同的:

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

其中n选择不同数值时就可以得出不同阶的曲线公式。同时从上面的推导过程也可以知道,不论是几阶曲线,我们都可以完全由一阶来表示,而这个“表示”的过程就是我们在上面看到的形成动画中那些辅助线。故可以感受下作者自己写的曲线形成动画中的效果,每段辅助线均由一阶曲线形成:

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

相关地址

物体跟随复杂曲线轨迹运动

当我们知道曲线的公式有何而来之后,如何让小球沿着曲线运动就很好理解了。我们生成的每段曲线都是可以用公式表示出来的,也正因如此我们就可以得到每个t值时的曲线坐标点。从而知道物体的绘制坐标。

//核心逻辑
LinearGradient.prototype.drawBall = function() {
    var self = this
    var item = ctrlNodesArr[ctrlDrawIndex] 
    //存储了各段曲线的控制点
    //各段曲线均为三阶贝塞尔,故下面计算x,y值代入到了三阶公式中
    var ctrlAx = item.cAx,//各个控制点
        ctrlAy = item.cAy,
        ctrlBx = item.cBx,
        ctrlBy = item.cBy,
    ...
    if(item.t > 1) {
        ctrlDrawIndex++ //当一段曲线的t>1说明曲线已经走到头
    }else {
        self.ctx.clearRect(0, 0, self.width, self.height)
        item.t += 0.05
        var ballX = ox * Math.pow((1 - item.t), 3) + 3 * ctrlAx * item.t * Math.pow((1 - item.t), 2) + 3 * ctrlBx * Math.pow(item.t, 2) * (1 - item.t) + x * Math.pow(item.t, 3)
        var ballY = oy * Math.pow((1 - item.t), 3) + 3 * ctrlAy * item.t * Math.pow((1 - item.t), 2) + 3 * ctrlBy * Math.pow(item.t, 2) * (1 - item.t) + y * Math.pow(item.t, 3)
        //代入三阶贝塞尔曲线公式算出小球的坐标值
        self.ctx.beginPath()
        self.ctx.arc(ballX, ballY, 5, 0, Math.PI * 2, false)
        self.ctx.fill()
    }
    if(ctrlDrawIndex !== ctrlNodesArr.length) {
        window.requestAnimationFrame(newMap.drawBall.bind(self))
    }
}

最后

demo地址:这里✨✨

源码地址:欢迎star

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

HTML / CSS 相关文章推荐
详解CSS中iconfont的使用
Aug 04 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
CSS list-style-type属性使用方法
May 21 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 #HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 #HTML / CSS
H5混合开发app如何升级的方法
Jan 10 #HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 #HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 #HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 #HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 #HTML / CSS
You might like
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
PDO实现学生管理系统
2020/03/21 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
中止javascript执行的方法
2014/02/14 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
jQuery插件开发的五种形态小结
2015/03/04 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Python3 模块、包调用&路径详解
2017/10/25 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Django添加feeds功能的示例
2018/08/07 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
python 爬取小说并下载的示例
2020/12/07 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
英国高街电视:High Street TV
2018/05/22 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
触摸春天教学反思
2014/02/03 职场文书
房地产项目策划书
2014/02/05 职场文书
文员岗位职责范本
2014/03/08 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
护士岗位竞聘书
2015/09/15 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python