JS之Math.sin与Math.cos介绍及应用-实现鼠标点击后的烟花效果

基本介绍

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

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

其中函数中是x是指“弧度”而非角度。

弧度定义：两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度（单位：rad)。

角度定义：两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当弧长正好等于圆周长的360分之一时，两条射线的夹角的大小为1度。(单位: º）

如图所示：

角度转弧度（弧度计算公式）：2π / 360 = π / 180 ≈ 0.0174rad,即: 度数 * (π / 180） = 弧度

弧度转角度（角度计算公式）: 360 / 2π = 180 / π ≈ 57.3º, 即: 弧度 * (180 / π） = 度数

// 将30º转为弧度rad
 30º * (π / 180）= 0.523320 rad 
 
  将0.523320rad转为度º
 0.523320rad * (180 / π) = 29.9992352688º

可参考：

特殊值：

度	0°	30°	45°	60°	90°	120°	135°	150°	180°	270°	360°
弧度	0	π/6	π/4	π/3	π/2	2π/3	3π/4	5π/6	π	3π/2	2π

正弦函数和余弦函数的图像如图所示：

实例

实例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）而言的。
}

注意：
1、本例是以“12点为起点,角度增大时为顺时针方向“，求X坐标和Y坐标的方法是：
X坐标=a + Math.sin(角度 * (Math.PI / 180)) * r ；
Y坐标=b - Math.cos(角数 * (Math.PI / 180)) * r ；

2、一般“3点为起点,角度增大时为逆时针方向“，求X坐标和Y坐标的方法是：
X坐标 = a + Math.cos(角度 * (Math.PI / 180)) * r;
Y坐标 = b - Math.sin(角度 * (Math.PI / 180)) * r;

实例3：使用Math.sin与Math.cos实现鼠标点击后的烟花效果

cursor-effects.js网上代码：

class Circle {
  constructor({ origin,speed,color,angle,context }) {
    this.origin = origin
    this.position = { ...this.origin }
    this.color = color
    this.speed = speed
    this.angle = angle
    this.context = context
    this.renderCount = 0
  }

  draw() {
    this.context.fillStyle = .color
    .context.beginPath()
    this.context.arc(this.position.x,this.position.y,2,Math.PI * 2)
    .context.fill()
  }

  move() {
    this.position.x = (Math.sin(this.angle) * this.speed) + .position.x
    this.position.y = (Math.cos(this.position.y + (this.renderCount * 0.3this.renderCount++
  }
}

class Boom {
  constructor ({ origin,context,circleCount = 10,area }) {
    this.circleCount = circleCount
    this.area = area
    this.stop = false
    this.circles = []
  }

  randomArray(range) {
    const length = range.length
    const randomIndex = Math.floor(length * Math.random())
    return range[randomIndex]
  }

  randomColor() {
    const range = ['8','9','A','B','C','D','E','F']
    return '#' + this.randomArray(range) + .randomArray(range)
  }

  randomRange(start,end) {
    return (end - start) * Math.random() + start
  }

  init() {
    for(let i = 0; i < this.circleCount; i++) {
      const circle = new Circle({
        context: .context,origin: .origin,color: .randomColor(),angle: this.randomRange(Math.PI - 1,Math.PI + 1),speed: this.randomRange(1,6)
      })
      .circles.push(circle)
    }
  }

  move() {
    this.circles.forEach((circle,index) => {
      if (circle.position.x > this.area.width || circle.position.y > .area.height) {
        return this.circles.splice(index,1)
      }
      circle.move()
    })
    if (this.circles.length == 0) {
      true
    }
  }

  draw() {
    this.circles.forEach(circle => circle.draw())
  }
}

class CursorSpecialEffects {
  constructor() {
    this.computerCanvas = document.createElement('canvas'this.renderCanvas = document.createElement('canvas')

    this.computerContext = this.computerCanvas.getContext('2d'this.renderContext = this.renderCanvas.getContext('2d'this.globalWidth = window.innerWidth
    this.globalHeight = window.innerHeight

    this.booms = []
    this.running = false
  }

  handleMouseDown(e) {
    const boom =  Boom({
      origin: { x: e.clientX,y: e.clientY },context: .computerContext,area: {
        width: .globalWidth,height: .globalHeight
      }
    })
    boom.init()
    .booms.push(boom)
    this.running || .run()
  }

  handlePageHide() {
    
  }

  init() {
    const style = .renderCanvas.style
    style.position = 'fixed'
    style.top = style.left = 0
    style.zIndex = '999999999999999999999999999999999999999999'
    style.pointerEvents = 'none'

    style.width = this.renderCanvas.width = this.computerCanvas.width = .globalWidth
    style.height = this.renderCanvas.height = this.computerCanvas.height = .globalHeight

    document.body.append(.renderCanvas)

    window.addEventListener('mousedown',1)">this.handleMouseDown.bind())
    window.addEventListener('pagehide',1)">this.handlePageHide.bind())
  }

  run() {
    true
    this.booms.length == 0
    }
    requestAnimationFrame(this.run.bind())
    this.computerContext.clearRect(0,1)">this.globalWidth,1)">.globalHeight)
    this.renderContext.clearRect(0,1)">.globalHeight)

    this.booms.forEach((boom,1)">if (boom.stop) {
        this.booms.splice(index,1)">)
      }
      boom.move()
      boom.draw()
    })
    this.renderContext.drawImage(this.computerCanvas,1)">.globalHeight)
  }
}

const cursorSpecialEffects =  CursorSpecialEffects()
cursorSpecialEffects.init()

优化后的代码：

class Circle {
    constructor({origin,speed}) {
        this.position = {...origin};
         context;
         color;
         angle;
         speed;
        ;
    }
    draw() {
        .color;
        .context.beginPath();
        );
        .context.fill();
    }
    move() {
        this.position.x += Math.sin(.speed;
        this.position.y += Math.cos(this.speed + ;
        this.renderCount ++;
    }
}

class Boom {
    constructor({origin,area,circleNum = 10}) {
         origin;
         area;
        this.circleNum = circleNum;
         [];
        ;
    }
    
    randomColor() {
        const rang = '89ABCDEF';
        const num = 6;
        let resultStr = ''for(let i = 0,num = 6; i < num; i++) {
            resultStr += rang.charAt(Math.floor(rang.length * Math.random()));
        }
        return '#' + resultStr;
    }
    
    randomRange(start,end) {
        return start + Math.random() * (end - start)
    }
    
    init() {
        this.circleNum; i++) {
            const circle =  Circle({
                origin: this.randomRange(Math.PI / 2,Math.PI * 3 / 2)
            })
            .circles.push(circle);
        }
    }
    
    move() {
        this.circles.length; i++) {
            const curCircle = .circles[i];
            if(curCircle.x >= this.area.width || curCircle.y >= .area.height) {
                this.circles.splice(i,1)">);
                i--;
                continue;
            }
            curCircle.move();
        }
        if(this.circles.length === 0) {
            ;
        }
    }
    
    draw() {
        this.circles.forEach((circle) => circle.draw());
    }
}

class MouseClickEffect {
    constructor() {
        this.drawCanvas = document.createElement('canvas'this.drawContext = this.drawCanvas.getContext('2d');
        const style = .drawCanvas.style;
        style.left = style.top = 0;
        style.position = 'fixed';
        style.zIndex = '999999999';
        style.pointerEvents = 'none'this.drawCanvas.width =  window.innerWidth;
        this.drawCanvas.height =  window.innerHeight;
        document.body.appendChild(.drawCanvas);
        ;
        
        window.addEventListener('mousedown',1)">));
        window.addEventListener('resize',1)">this.changeWindow.bind());
    }
    
    handleMouseDown(e) {
        const boom =  Boom({
            origin: {x: e.clientX,y: e.clientY},area: {width: .globalHeight},1)">.drawContext
        });
        boom.init();
        .booms.push(boom);
        .run();
    }
    
    changeWindow() {
         window.innerHeight;
        this.drawContext.clearRect(0,1)">.globalHeight);
    }
    
    run() {
        this.booms.length === 0;
        }
        requestAnimationFrame());
        .globalHeight);
        this.booms.length; i++) {
            const boom = .booms[i];
            (boom.stop) {
                this.booms.splice(i,1)">;
            }
            boom.move();
            boom.draw();
        }
    }
}

new MouseClickEffect();

JS之Math.sin与Math.cos介绍及应用-实现鼠标点击后的烟花效果

基本介绍

实例

实例1：如何得到圆上每个点的坐标？

实例2：如何求时钟的秒针转动一圈的轨迹？

实例3：使用Math.sin与Math.cos实现鼠标点击后的烟花效果

猜你在找的JavaScript相关文章