贝塞尔曲线算法，js贝塞尔曲线路径点

 　　　　//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;
        }

         MultiPointBezier(points,t) {
            var len = points.length;
            var x = 0,y = 0;
            var erxiangshi =  (start,end) {
                var cs = 1,bcs = 1;
                while (end > 0) {
                    cs *= start;
                    bcs *= end;
                    start--;
                    end--;
                }
                return (cs / bcs);
            };
            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),i));
            }
             { 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></script src="Scripts/jquery-1.7.1.min.js"scripttype="text/javascript">
        var guijipoints = [];
         index = 0;
        $(document).ready(function () {
             ps  [{ x:  },{ x: 100200103004002050030700800 }];
            guijipoints  CreateBezierPoints(ps,1000);
             moveobj  $("#move_div);
            setInterval( () {
                 p  guijipoints[index];
                console.log(p.x);
                moveobj.css({ left: p.x,top: p.y });
                index++;
                if (index >= guijipoints.length) {
                    index ;
                }
            },1)">1000 / );
            guijipoints.forEach( (obj,i) {
                createDiv(obj.x,obj.y);
            });
        });

         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：生成的点数
         points  [];
            for ( i ; i < pointsAmount; i) {
                 point  MultiPointBezier(anchorpoints,i / pointsAmount);
                points.push(point);
            }
            return points;
        }

         len  points.length;
            ;
             erxiangshi  cs 1while (end > ) {
                    cs *= start;
                    bcs  end;
                    start--;
                    end;
                }
                 (cs  bcs);
            };
             len; i points[i];
                x += point.x * Math.pow((1 - t),(len -  i))  Math.pow(t,i)  (erxiangshi(len  point.y </>

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

运行结果图如下：

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

function onebsr(t,a1,a2) {
    return a1 + (a2 - a1) * t;
}


function twobsr(t,a2,a3) {
    return ((1 - t) * (1 - t)) * a1 + 2 * t * (1 - t) * a2 + t * t * a3;
function threebsr(t,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贝塞尔曲线路径点

相关文章