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 动态添加表格行 使用模板、标记
Oct 24 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
JavaScript判断浏览器版本的方法
Nov 03 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原理的opcodes(操作码)
2010/10/26 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
python如何保存文本文件
2020/06/07 Python
python 利用zmail库发送邮件
2020/09/11 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
国际贸易专业推荐信
2013/11/15 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
公证书
2019/04/17 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis