js畫圓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 50px;
height: 50px;
background-color: pink;
position: absolute;
}
.sp span{
width: 5px;
height: 5px;
background-color: pink;
position: absolute;
}
</style>
<script>
window.onload = function(){
var oBox = document.querySelector(".box");
var oSpan = document.querySelector("span");
var r = 100; //設置半徑
var x = 400 ; //設置圓點
var y = 400;
var angle = 0; //角度
setInterval(function(){
angle ++;
var radian = angle * Math.PI /180; //弧度
var a = Math.sin(radian) * r; //圓上點的橫縱坐標的值
var b = Math.cos(radian) * r;
oBox.style.left = x + a + "px"; //運動軌跡
oBox.style.top = y-b+"px";
var span = document.createElement("span"); //給運動軌跡添加底色
span.style.left = oBox.offsetLeft + "px";
span.style.top = oBox.offsetTop + "px";
oSpan.appendChild(span);
},30)
}
</script>
</head>
<body>
<div class="box"></div>
<span class="sp"></span>
</body>
</html>