javascript获取曲线路径每个像素的坐标
先用svg做个 物体验证路径动画 然后实时获取物体坐标存入数组就行了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>{$title}</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" /> <meta name="format-detection" content="telephone=no" /> <!-- Link Swiper's CSS --> <include file="commonheader" /> <style type="text/css"> svg { width: 300px; display: block; position: absolute; } .ball { width: 1px; height: 1px; background-color: red; border-radius: 50%; } .fff{ offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80'); offset-distance: 0%; animation: red-ball 10s linear forwards; } @keyframes red-ball { from { offset-distance: 0%; } to { offset-distance: 100%; } } </style> </head> <body> <svg width="300px" height="175px" version="1.1"> <path fill="transparent" stroke="#888888" stroke-width="1" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path> </svg> <div class="ball"></div> <script src="{$yumingnew}/js/jquery.min.js"> </script> <script type="text/javascript"> var lujinglist = []; $(function(){ $('.ball').addClass('fff'); setInterval(function(){ lujinglist.push([$('.ball').offset().left,$('.ball').offset().top]); },30) setTimeout(function(){ console.log(JSON.stringify(lujinglist)); },10000) }) </script> </body> </html>
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/18775.html