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 相关文章推荐
广告显示判断
Aug 31 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
JavaScript的document对象和window对象详解
Dec 30 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
js添加事件的通用方法推荐
May 15 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 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 手机归属地查询 api
2010/02/08 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
python列表的增删改查实例代码
2018/01/30 Python
python3调用R的示例代码
2018/02/23 Python
python字符串常用方法
2018/06/14 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
django之自定义软删除Model的方法
2019/08/14 Python
python 表格打印代码实例解析
2019/10/12 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
金讯Java笔试题目
2013/06/18 面试题
出生医学证明样本
2014/01/17 职场文书
旅游市场营销方案
2014/03/09 职场文书
百日安全生产活动总结
2014/07/05 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2014年村委会工作总结
2014/11/24 职场文书
安装工程师岗位职责
2015/02/13 职场文书
使用pytorch实现线性回归
2021/04/11 Python