JavaScript实现的贝塞尔曲线算法简单示例


Posted in Javascript onJanuary 30, 2018

本文实例讲述了JavaScript实现的贝塞尔曲线算法。分享给大家供大家参考,具体如下:

如果在HTML5支持好的浏览器中,可以看到用svg绘制的路径线。

在所有浏览器中,均可以看到一个小方块沿着贝塞尔曲线路径来回运动。

效果图:

JavaScript实现的贝塞尔曲线算法简单示例

主要代码:

<div style="position:absolute;left:0;top:0;width:500px;height:300px;overflow:hidden;">
<svg id="root" width="500" height="300" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
<title>svg</title>
<path d="M20,100 c80 -200 280 200 380 0 h-400" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="3,3" />
</svg>
</div>
<div id="dotMove" style="position:absolute;width:6px;height:6px;overflow:hidden;background-color:#FF0000;"></div>
<script type="text/javascript">
/*
参考维基百科
http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A
*/
function Point2D(x,y){
  this.x=x||0.0;
  this.y=y||0.0;
}
/*
 cp在此是四??元素的?列:
 cp[0]?槠鹗键c,或上?D中的P0
 cp[1]?榈谝??控制?,或上?D中的P1
 cp[2]?榈诙??控制?,或上?D中的P2
 cp[3]?榻Y束?,或上?D中的P3
 t???抵担? <= t <= 1
*/
function PointOnCubicBezier( cp, t )
{
  var  ax, bx, cx;
  var  ay, by, cy;
  var  tSquared, tCubed;
  var  result = new Point2D ;
  /*?算多?式?S??/
  cx = 3.0 * (cp[1].x - cp[0].x);
  bx = 3.0 * (cp[2].x - cp[1].x) - cx;
  ax = cp[3].x - cp[0].x - cx - bx;
  cy = 3.0 * (cp[1].y - cp[0].y);
  by = 3.0 * (cp[2].y - cp[1].y) - cy;
  ay = cp[3].y - cp[0].y - cy - by;
  /*?算位於??抵?的曲??*/
  tSquared = t * t;
  tCubed = tSquared * t;
  result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;
  result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;
  return result;
}
/*
 ComputeBezier以控制?cp所?生的曲??,填入Point2D???的?列。
 呼叫者必?分配足?虻挠????以供?出?果,其??lt;sizeof(Point2D) numberOfPoints>
*/
function ComputeBezier( cp, numberOfPoints, curve )
{
  var  dt;
  var  i;
  dt = 1.0 / ( numberOfPoints - 1 );
  for( i = 0; i < numberOfPoints; i++)
    curve[i] = PointOnCubicBezier( cp, i*dt );
}
var cp=[
  new Point2D(20, 0), new Point2D(100, 200), new Point2D(300, -200), new Point2D(400, 0)
];
var numberOfPoints=100;
var curve=[];
ComputeBezier( cp, numberOfPoints, curve );
var i=0, dot=document.getElementById("dotMove");
setInterval(function (){
  var j = (i<100)?i:(199-i);
  dot.style.left=curve[j].x+'px';
  dot.style.top=100-curve[j].y+'px';
  if(++i==200)i=0;
}, 50);
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 #Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 #Javascript
微信小程序数据存储与取值详解
Jan 30 #Javascript
Vue精简版风格概述
Jan 30 #Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 #Javascript
vue2.0之多页面的开发的示例
Jan 30 #Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 #Javascript
You might like
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
最短的IE判断代码
2011/03/13 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
深入理解js中this的用法
2016/05/28 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
利用python实现周期财务统计可视化
2019/08/25 Python
python各种excel写入方式的速度对比
2020/11/10 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
python 实现有道翻译功能
2021/02/26 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
法学院方阵解说词
2014/01/29 职场文书
购房协议书
2014/04/11 职场文书
环保建议书300字
2014/05/14 职场文书
营销计划书
2015/01/17 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL