JS Math.sin() 与 Math.cos() 用法实例剖析

Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间;

Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之间的数;

这两个函数中的X 都是指的“弧度”而非“角度”,弧度的计算公式为: 2*PI/360*角度

30° 角度 的弧度 = 2*PI/360*30

1、如何得到圆上每个点的坐标?

解决思路:根据三角形的正玄、余弦来得值;

假设一个圆的圆心坐标是(a,b),半径为r,

则圆上每个点的X坐标=a + Math.sin(2*Math.PI / 360) * r ;Y坐标=b + Math.cos(2*Math.PI / 360) * r ;

2、如何求时钟的秒针转动一圈的轨迹?

假设秒针的初始值(起点)为12点钟方向,圆心的坐标为(a,b)。

解决思路:一分钟为60秒,一个圆为360°,所以平均每秒的转动角度为 360°/60 = 6°;


for(var times=0; times<60; times++) {

      var hudu = (2*Math.PI / 360) * 6 * times;

       var X = a + Math.sin(hudu) * r;

       var Y = b - Math.cos(hudu) * r    //  注意此处是“-”号,因为我们要得到的Y是相对于(0,0)而言的。

}

3、数学中的Sin和Cos是什么意思

这两个都是基本的三角函数,在初中三年级应该会接触到的,其中sin是正弦函数,cos是余弦函数,具体的含义如下:

正弦函数sinA:表示在一个直角三角形中,∠A(非直角)的对边与三角形的斜边的比;

余弦函数cosA:表示在一个直角三角形中,∠A(非直角)的邻边与三角形的斜边的比;

其在下图中的表示就是(其中∠C=90°):
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
当然了,正弦和余弦函数能在直角三角形中具体表示,但不代表他们只能在直角三角形汇总表示,任何一个角度都是有正弦和余弦值的包括钝角以及大于360°的角,也就是说,上述式子中A的结果可以是任何实数,包括负数和0。

补充知识:正切函数
在这里插入图片描述
,这个函数也是经常用到的,其式子中的A也是可以大于360°,但是并不是全体实数,因为有几个角是没有正切值的,比如90°,A不能取的值应该是A≠90°+180°×n,n取整数。

<canvas id="canvas"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const 阻尼 = 0.02; const REPULSE_RADIUS = 60; class WaveParticle { constructor(x, y) { this.x = x; this.y = y; this.vx = Math.random() * 4 - 2; this.vy = Math.random() * 4 - 2; this.radius = 2; this.life = 1; this.splitCount = 0; this.maxSplitTimes = 3; this.splitCooldown = 0; } } let particles = []; // ===== 粒子更新 ===== function updateParticles() { particles.forEach((p, index) => { // 边界反弹 if (p.x < 0 || p.x > canvas.width) p.vx *= -1; if (p.y < 0 || p.y > canvas.height) p.vy *= -1; // 边界碰撞分裂 if ((p.x < 0 || p.x > canvas.width || p.y < 0 || p.y > canvas.height) && performance.now() > p.splitCooldown && p.splitCount < p.maxSplitTimes) { for (let i = 0; i < 2; i++) { const angle = Math.random() * Math.PI * 2; const newParticle = new WaveParticle(p.x, p.y); newParticle.maxSplitTimes = 3; newParticle.splitCooldown = performance.now() + 5000; newParticle.vx = p.vx * 0.8 + Math.cos(angle) * 2; newParticle.vy = p.vy * 0.8 + Math.sin(angle) * 2; particles.push(newParticle); } // 粒子数量控制 if (particles.length > 500) { particles.splice(0, particles.length - 500); } p.splitCount++; p.splitCooldown = performance.now() + 5000; } // 能量衰减 p.vx *= (1 - 阻尼); p.vy *= (1 - 阻尼); // 更新位置 p.x += p.vx; p.y += p.vy; // 粒子间碰撞 particles.forEach(other => { if (p === other) return; const dx = other.x - p.x; const dy = other.y - p.y; const dist = Math.sqrt(dx*dx + dy*dy); if (dist < REPULSE_RADIUS) { const force = (REPULSE_RADIUS - dist) / REPULSE_RADIUS; const angle = Math.atan2(dy, dx); p.vx -= Math.cos(angle) * force * 0.5; p.vy -= Math.sin(angle) * force * 0.5; // 碰撞分裂 if (dist < p.radius * 2 && performance.now() > p.splitCooldown && p.splitCount < p.maxSplitTimes) { for (let i = 0; i < 2; i++) { const angle = Math.random() * Math.PI * 2; const newParticle = new WaveParticle(p.x, p.y); newParticle.maxSplitTimes = 3; newParticle.splitCooldown = performance.now() + 5000; newParticle.vx = p.vx * 0.8 + Math.cos(angle) * 2; newParticle.vy = p.vy * 0.8 + Math.sin(angle) * 2; particles.push(newParticle); } // 粒子数量控制 if (particles.length > 500) { particles.splice(0, particles.length - 500); } p.splitCount++; p.splitCooldown = performance.now() + 500; } } }); }); } // ===== 渲染绘制 ===== function draw() { ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); particles.forEach(p => { ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, Math.PI*2); ctx.fillStyle = `rgba(0, 150, 255, ${p.life})`; ctx.fill(); }); } // ===== 动画循环 ===== function animate() { updateParticles(); draw(); requestAnimationFrame(animate); } animate(); </script>上述代码并不能运行,保持原功能适当改动,发给我完整代码运行
最新发布
03-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值