这篇文章主要介绍了javascript实现的贝塞尔曲线算法,结合简单实例形式分析了基于javascript的贝塞尔曲线算法的相关实现技巧,需要的朋友可以参考下
本文实例讲述了javascript实现的贝塞尔曲线算法。分享给大家供大家参考，具体如下：
如果在html5支持好的浏览器中，可以看到用svg绘制的路径线。
在所有浏览器中，均可以看到一个小方块沿着贝塞尔曲线路径来回运动。
效果图：
主要代码：
<p 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></p><p id="dotmove" style="position:absolute;width:6px;height:6px;overflow:hidden;background-color:#ff0000;"></p><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]為起始點，或上圖中的p0 cp[1]為第一個控制點，或上圖中的p1 cp[2]為第二個控制點，或上圖中的p2 cp[3]為結束點，或上圖中的p3 t為參數值，0 <= t <= 1*/function pointoncubicbezier( cp, t ){ var ax, bx, cx; var ay, by, cy; var tsquared, tcubed; var result = new point2d ; /*計算多項式係數*/ 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; /*計算位於參數值t的曲線點*/ 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結構的陣列。 呼叫者必須分配足夠的記憶體以供輸出結果，其為<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>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue 2.5.2下使用axios + express本地请求404的解决方法
使用vue和react来实现展开收起等效果
在vue中如何实现webpack打包优化
以上就是使用javascript如何实现贝塞尔曲线算法（详细教程）的详细内容。