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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 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数据过滤的方法
2013/10/30 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
python连接mysql实例分享
2016/10/09 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
管道维修工岗位职责
2013/12/27 职场文书
给医务人员表扬信
2014/01/12 职场文书
教师简历自我评价
2014/02/03 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
golang实现浏览器导出excel文件功能
2022/03/25 Golang