来源：未知 时间：2022-07-14 10:57 作者：小飞侠 阅读:次
[导读] js计算圆形和椭圆公式 圆形： angle 是角度 R 是半径 这是标准公式，直接带入进下面公式就可得到当前点的 X,Y 坐标 x=Math.cos(angle)*Ry=Math.sin(angle)*R 椭圆形 angle 是角度 a 是横向x轴的椭圆半...
|
js计算圆形和椭圆公式
圆形： angle 是角度 R 是半径 这是标准公式，直接带入进下面公式就可得到当前点的 X,Y 坐标 x = Math.cos(angle) * R y = Math.sin(angle) * R 椭圆形 angle 是角度 a 是横向x轴的椭圆半径，b是纵向y轴的椭圆半径, 这是标准公式，直接带入进下面公式就可得到当前点的 X,Y 坐标 x = Math.cos(angle) * a y = Math.sin(angle) * b 预览效果: 源码: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>椭圆</title>
</head>
<body>
<script type="text/javascript">
var ball = document.createElement('div');
ball.setAttribute('style', 'width:10px;height:10px;background:red;border-radius:50%;position:absolute;');
document.body.appendChild(ball);
var ball2 = document.createElement('div');
ball2.setAttribute('style', 'width:10px;height:10px;background:blue;border-radius:50%;position:absolute;');
document.body.appendChild(ball2);
var ball3 = document.createElement('div');
ball3.setAttribute('style', 'width:10px;height:10px;background:green;border-radius:50%;position:absolute;');
document.body.appendChild(ball3);
// 圆形
var ball4 = document.createElement('div');
ball4.setAttribute('style', 'width:15px;height:15px;background:black;border-radius:50%;position:absolute;');
document.body.appendChild(ball4);
var angle = 0;
var angle2 = 0;
var angle3 = 0;
var angle4 = 0;
var centX = 300;
var centY = 300;
var R = 60;
function runing(){
// 1
angle += 0.05;
var ballX = centX + Math.cos(angle) * 60;
var ballY = centY + Math.sin(angle) * 40;
ball.style.left = ballX + 'px';
ball.style.top = ballY + 'px';
// 2
angle2 += 0.01;
var ballX2 = centX + Math.cos(angle2) * 60;
var ballY2 = centY + Math.sin(angle2) * 40;
ball2.style.left = ballX2 + 'px';
ball2.style.top = ballY2 + 'px';
// 3
angle3 += 0.35;
var ballX3 = centX + Math.cos(angle3) * 60;
var ballY3 = centY + Math.sin(angle3) * 40;
ball3.style.left = ballX3 + 'px';
ball3.style.top = ballY3 + 'px';
// 4
angle4 += 0.1;
var ballX4 = centX + Math.cos(angle4) * R;
var ballY4 = centY + Math.sin(angle4) * R;
ball4.style.left = ballX4 + 'px';
ball4.style.top = ballY4 + 'px';
window.requestAnimationFrame(runing);
}
runing();
</script>
</body>
</html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
