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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
javascript模仿msgbox提示效果代码
Jun 10 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 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
我的论坛源代码(六)
2006/10/09 PHP
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
Python中实现结构相似的函数调用方法
2015/03/10 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
对python中return和print的一些理解
2017/08/18 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
python获取中文字符串长度的方法
2018/11/14 Python
python3 求约数的实例
2019/12/05 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
python 实现两个线程交替执行
2020/05/02 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
如何将json数据转换为python数据
2020/09/04 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
市场拓展计划书
2014/05/03 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
关于诚信的活动方案
2014/08/18 职场文书
英文商务邀请函范文
2015/01/31 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
Python异常类型以及处理方法汇总
2021/06/05 Python
springcloud之Feign超时问题的解决
2021/06/24 Java/Android