本文实例讲述了JavaScript实现的贝塞尔曲线算法。分享给大家供大家参考,具体如下:
如果在HTML5支持好的浏览器中,可以看到用svg绘制的路径线。
在所有浏览器中,均可以看到一个小方块沿着贝塞尔曲线路径来回运动。
效果图:
主要代码:
<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://puteBezier( 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数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。