//anchorpoints：贝塞尔基点

        //pointsAmount：生成的点数
　　　　//return 路径点的Array

        function CreateBezierPoints(anchorpoints, pointsAmount) {

            var points = [];

            for (var i = 0; i < pointsAmount; i++) {

                var point = MultiPointBezier(anchorpoints, i / pointsAmount);

                points.push(point);

            }

            return points;

        }

        function MultiPointBezier(points, t) {

            var len = points.length;

            var x = 0, y = 0;

            var erxiangshi = function (start, end) {

                var cs = 1, bcs = 1;

                while (end > 0) {

                    cs *= start;

                    bcs *= end;

                    start--;

                    end--;

                }

                return (cs / bcs);

            };

            for (var i = 0; i < len; i++) {

                var point = points[i];

                x += point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));

                y += point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));

            }

            return { x: x, y: y };

        }

以上是计算高阶贝赛尔曲线所有点的方法，

方法引用了引用公式：

下面是示例代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="Scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">

        var guijipoints = [];

        var index = 0;

        $(document).ready(function () {

            var ps = [{ x: 0, y: 0 }, { x: 100, y: 200 }, { x: 200, y: 10 }, { x: 300, y: 400 }, { x: 400, y: 20 }, { x: 200, y: 500 }, { x: 500, y: 30 }, { x: 700, y: 300 }, { x: 800, y: 800 }, { x: 800, y: 800 }];

            guijipoints = CreateBezierPoints(ps, 1000);

            var moveobj = $("#move_div");

            setInterval(function () {

                var p = guijipoints[index];

                console.log(p.x);

                moveobj.css({ left: p.x, top: p.y });

                index++;

                if (index >= guijipoints.length) {

                    index = 0;

                }

            }, 1000 / 100);

            guijipoints.forEach(function (obj, i) {

                createDiv(obj.x, obj.y);

            });

        });

        function createDiv(x, y) {

            $("body").append('<div style="position: absolute; width: 2px; height: 2px; left:' + x + 'px;top:' + y + 'px; overflow: hidden; background-color: #FF0000"></div>');

        }

        //anchorpoints：贝塞尔基点

        //pointsAmount：生成的点数

        function CreateBezierPoints(anchorpoints, pointsAmount) {

            var points = [];

            for (var i = 0; i < pointsAmount; i++) {

                var point = MultiPointBezier(anchorpoints, i / pointsAmount);

                points.push(point);

            }

            return points;

        }

        function MultiPointBezier(points, t) {

            var len = points.length;

            var x = 0, y = 0;

            var erxiangshi = function (start, end) {

                var cs = 1, bcs = 1;

                while (end > 0) {

                    cs *= start;

                    bcs *= end;

                    start--;

                    end--;

                }

                return (cs / bcs);

            };

            for (var i = 0; i < len; i++) {

                var point = points[i];

                x += point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));

                y += point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));

            }

            return { x: x, y: y };

        }

    </script>

</head>

<body>

    <div id="move_div" style=" position: absolute; left: 0px; top: 0px; height: 10px; width: 10px; background-color: red; "></div>

</body>

</html>

运行结果图如下：

一次、二次、三次贝塞尔曲线函数

function onebsr(t, a1, a2) {

    return a1 + (a2 - a1) * t;

}

function twobsr(t, a1, a2, a3) {

    return ((1 - t) * (1 - t)) * a1 + 2 * t * (1 - t) * a2 + t * t * a3;

}

function threebsr(t, a1, a2, a3, a4) {

    return a1 * (1 - t) * (1 - t) * (1 - t) + 3 * a2 * t * (1 - t) * (1 - t) + 3 * a3 * t * t * (1 - t) + a4 * t * t * t;

}

贝塞尔曲线算法，js贝塞尔曲线路径点的更多相关文章

  1. 关于曲线 规划 算法 线性 S曲线 贝塞尔曲线

    工控领域经常会涉及速度加减速的算法:线性加减速,S曲线加减速(sin函数,拓展其他三角函数曲线), 贝塞尔曲线,等等. 线性加减速:    设定起始速度V0,目标速度V1,加速时间Ta(s,或加速度) ...

  2. Node.js文件系统、路径的操作详解

    17173 17173 2 75 2014-12-12T05:06:00Z 2014-12-12T05:06:00Z 21 2735 15595 www.17173.com 129 36 18294 ...

  3. js相对路径相关（比如：js中的路径依赖导入该js文件的路径）

    问题描述: 前几天调用同事的js接口文件,在他自己的html测试页面ok,在我这边调用时出现问题. debug过程中,将该测试html移到其他位置都不行,放到原html测试页面同层次路径下是OK的. ...

  4. Node.js文件系统、路径的操作函数

    Node.js文件系统.路径的操作函数 目录 Node.js文件系统.路径的操作函数 1.读取文件readFile函数 2.写文件 3.以追加方式写文件 4.打开文件 5.读文件,读取打开的文件内容到 ...

  5. gif格式的图片不能存在与包含js目录的路径中?

    如题:gif格式的图片不能存在与包含js目录的路径中?是我的设置问题?还是真不能存在于js目录中. 今天纠结了一下午,某个项目中的效果就是出不来,找了差不多两个半小时... 在D盘新建一个js和jss ...

  6. 关于Node.js中的路径问题

    在前端学习过程中,涉及到路径的问题非常多,相对路径,绝对路径等.有时候明明觉得没问题,但是还是会出错.或者说线下没问题,但是到了线上就出现问题,因此弄懂路径问题,非常关键.我们需要知道为什么这个地方既 ...

  7. node.js中path路径模块的使用

    path模块是node.js中处理路径的核心模块.可以很方便的处理关于文件路径的问题. join() 将多个参数值合并成一个路径 const path = require('path'); conso ...

  8. P-R曲线及与ROC曲线区别

    一.P-R曲线 P-R曲线刻画查准率和查全率之间的关系,查准率指的是在所有预测为正例的数据中,真正例所占的比例,查全率是指预测为真正例的数据占所有正例数据的比例. 即:查准率P=TP/(TP + FP ...

  9. linux sed命令查询结果前后批量追加内容(html文件批量修改css,js等文件路径)

    1.需求:linux使用shell命令查询结果前后批量追加内容 例如:我需要在当前目录下所有的css文件路径前追加域名 我想的是用sed替换去实现,鲍哥的思路是用for循环 1.1方法1:鲍哥的for ...

  10. 微信小程序存放视频文件到阿里云用到算法js脚本文件

           peterhuang007/weixinFileToaliyun: 微信小程序存放视频文件到阿里云用到算法js脚本文件 https://github.com/peterhuang007/ ...

随机推荐

  1. RadioGroup&RadioButton

    RadioGroup提供多选一机制:属性orientation:“vertlcal” or “horizontal” @Override public void onCheckedChanged(Ra ...

  2. 关于Eclipse中配置产品启动的插件

    比较省事的是白哥给我一个配置文件(EE_CONF_TEST.launch),使用的方法白哥推荐我新建一个普通的java项目,然后拷贝到这个项目中. 拷贝到项目中之后在Run Configuration ...

  3. JavaScript 零散知识点1 （正则表达式+定时器+hover）

    1.clear:both清楚浮动影响//css中 2.正则表达式 search方法 :指明是否存在相应的匹配,如找到一个返回一个整数值,表明这个匹配距离字符串开始的偏移位置,如果没有找到匹配返回-1f ...

  4. form表单按enter键自动提交的问题

    废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 <!doctype html> <html lang="en"> <head& ...

  5. think straight系列读书笔记之《暗时间》

    一周一篇读书笔记,这是第零篇,为啥从零计数,你们懂的~   大二读了<暗时间>,这本书带我进入了心理学的大门,让我开始关注思维,专注,效率,认知,记忆等东西.两年之后重读这本书,依然收获很 ...

  6. 用Cookie记住上次登录用户名

    一个登录页面设置查看Cookie中的数据(Cookie不为null);然后将页面提交到另一个页面去,在这个页面中的到是否选择记住用户名,如果选择了, 就创建Cookie对象,将用户名存储起来,下次登录 ...

  7. jquery数据验证插件（自制，简单，练手）

    一:最近项目中js数据验证比较多,为了统一风格,移植复用,于是顺手封装了Jquery的插件. (function($) { var defaults = { bugColor: '#FFCCCC', ...

  8. C#学习笔记15：字符串、文件、目录的操作方法

    字符串:不可变性 String str=”abcdf”; 将字符串转换为char数组:ToCharArray(); Char[] ch=str.ToCharAarray(); 将char数组转换为字符 ...

  9. SQL Server2008数据库自动备份步骤

    一,  在电脑开始菜单中选择“SQL Server Management Studio”双击.在出现的界面中点击“连接”按钮. 二,  在出现的“ Microsoft SQL Server Manag ...

  10. for循环例题

    1· 一对幼兔一个月后长成小兔(每对兔子默认一公一母),再过一个月长成成兔并且生下一对小兔,以此类推,两年后有多少对兔子? Console.Write("输入年:");       ...