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>

 

posted @ 2020-09-16 16:06  newmiracle宇宙  阅读(567)  评论(0)  编辑  收藏  举报