JavaScript实现的贝塞尔曲线算法简单示例

本文实例讲述了Java脚本语言实现的贝塞尔曲线算法。分享给大家供大家参考，具体如下：

如果在HTML5支持好的浏览器中，可以看到用挽救(保存的简写)绘制的路径线。

在所有浏览器中，均可以看到一个小方块沿着贝塞尔曲线路径来回运动。

效果图：

主要代码：

div style=' position :绝对值；左侧left:0top:0宽度宽度：500像素高度' :300像素；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 0h-400 ' fill=' none ' stroke-width=' 1 ' stroke=' gray ' stroke-dash数组=' 3，3 '/SVG宽度：6 px高度：6像素飞越：隐藏；背景色-: # FF0000；/div脚本类型=' text/JavaScript '/*参考维基百科http://zh.wikipedia.org/wiki/貝茲曲線*/function Point2D(x，y){ this。x=x | | 0.0this.y=y | | 0.0}/* cp在此是四個元素的陣列： cp[0]為起始點，或上圖中的P0 cp[1]為第一個控制點，或上圖中的第一亲代方案[2]為第二個控制點，或上圖中的P2方案[3]為結束點，或上圖中的P3 t為參數值，0=t=1 */函数PointOnCubicBezier(CP，t ){ var ax，bx，CX；var ay，by，cy；var tSquared，tCubedvar结果=新点2D/*計算多項式係數*/cx=3.0 * (cp[1]).x - cp[0].x)；bx=3.0 * (cp[2]).x - cp[1].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；/*計算位於參數值t的曲線點*/tSquared=t * t；tCubed=tSquared * tresult。x=(ax * tCubed)(bx * tSquared)(CX * t)CP[0].x；结果。y=(ay * tCubed)(by * tSquared)(cy * t)CP[0].y；返回结果；}/* ComputeBezier以控制點丙酸纤维素所產生的曲線點，填入点2D結構的陣列。呼叫者必須分配足夠的記憶體以供輸出結果，其為sizeof(Point2D)numberOfPoints */function ComputeBezier(CP，numberOfPoints，curve){ var dt；风险值我；dt=1.0/(点数-1)；for(I=0；一、点数；(一)曲线[i]=PointOnCubicBezier(cp，I * dt)；}var cp=[新点2D(20，0)，新点2D(100，200人)，新点2D(300，-200)，新点2D(400，0)]；风险点数=100风险曲线=[];ComputeBezier(cp，点数，曲线);var i=0，点=文档。getelementbyid(' Dotmove ')；setInterval(function(){ var j=(i100)？I :(199-I)；dot.style.left=curve[j].x ' pxdot。风格。top=100-曲线[j].y ' px如果(I==200)I=0；}, 50);/script更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript数据结构与算法技巧总结》 、 《JavaScript数学运算用法总结》 、 《JavaScript排序算法总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript查找算法技巧总结》 及《JavaScript错误与调试技巧总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。