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 相关文章推荐
ExtJS DOM元素操作经验分享
Aug 28 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 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中让人头疼的浮点数运算分析
2016/10/10 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
python实现根据文件格式分类
2019/10/31 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
行政主管岗位职责
2013/11/18 职场文书
合作意向书格式及范文
2014/03/31 职场文书
幼儿园评语大全
2014/04/17 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
客房部经理岗位职责
2015/02/02 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
教育教学工作反思
2016/02/24 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js