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>
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)