javascript获取曲线路径每个像素的坐标详解编程语言

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/18775.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论