1. Math.sin(), Math.cos(), Math.PI

首先这三个放在一块了,因为他们三个经常是一起出现的

应用场景: 比如我们在用一些插件时,他提供了translate方法, 参数是x,y; 意思是x轴方向移动多少,y轴方向移动多少,比如translateX(50), 假设他是x方向移动50像素; translateY(60), 假设他是y方向移动60,如果这个元素的起点坐标是0,0, 那么他经过偏移之后,新的坐标点位置应该是 [50,60]; 所以你只要知道起点与终点位置,你可以很容易的将元素移动到你想要的位置;

image.png

那么提出一个新的问题,我不知道终点的坐标在哪里,我只知道他要向27.5度的方向移动长度30像素,该怎么办,也就是斜方向移动,如果是x,y这种水平垂直方向,那是不需要计算的.这时候我们就需要通过sin,cos或者其他的三角函数,去将斜方向的长度分解为水平和垂直两个方向上的位移; 即 len长度 要转化为 x,y 两个方向上的长度;

1.1公式为

len * Math.cos(弧度)   得到x 水平方向位移
len * Math.sin(弧度)    得到y 水平方向位移

注意 这里我写的是弧度, 如果参数是角度,我们还需要先把他转化为弧度;

1.2. 角度=>弧度 公式为:  deg * Math.PI / 180
1.3. 弧度=>角度 公式为:  deg * 180 / Math.PI

通过上面这些公式将一个斜方向的长度分解为x,y两个方向上的分量, 以便于我们在2维世界中实现斜着位移;

2. Math.atan2()

计算两个点之间的角度;有点像上面例子反例;
应用场景: 比如知道屏幕中心点x,y; 我想绘制一个箭头, 他的角度实时指向鼠标的位置; 那么我就需要旋转这个箭头多少度. 知道的条件 屏幕中心点x,y 鼠标的坐标 x1, y1;

image.png

2.1 Math.atan2(y1-y, x1-x);

他接受两个距离,分别是垂直方向,水平方向, 通过两条边确定角度; 他返回的是一个弧度值,注意如果你要的是角度,你还需要通过 1.3 在转化一下; 最后你可以通过监听鼠标移动事件,每次都计算一下,实时更新角度就可以了

Math.max, Math.min

其实这两个方法很简单哈, 大多数人都会用,不就是取最大值和最小值嘛~ 他在某些场景下可以简化代码;
应用场景: 比如我们要缩放图片,设置缩小的最小值 是 0.5 ,最大值是1.5, 我们通过滚轮来缩放, 比如滚轮向上滚是方法,

我们一般的写法是

let scale = 1.0; // 初始缩放比例
// 滚轮事件回调
function handleWheel(event) {
  const delta = event.deltaY > 0 ? -0.1 : 0.1; // 滚轮方向决定缩放方向
  scale += delta;
  if (scale < 0.5) {
    scale = 0.5;
  } else if (scale > 1.5) {
    scale = 1.5;
  }

  console.log("当前缩放比例:", scale);
}

简化写法(使用max,min): 

let scale = 1.0;
function handleWheel(event) {
  const delta = event.deltaY > 0 ? -0.1 : 0.1;
  scale = Math.max(0.5, Math.min(scale + delta, 1.5)); // 一行代码搞定范围限制

  console.log("当前缩放比例:", scale);
}