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度，(單位: o）

如圖所示：

角度轉弧度（弧度計算公式）：2π / 360  = π / 180 ≈ 0.0174rad, 即: 度數 * (π / 180） = 弧度

弧度轉角度（角度計算公式）: 360 / 2π  = 180 / π ≈ 57.3o,  即:   弧度 * (180 / π） = 度數

// 將30o轉為弧度rad
 30o * (π / 180）= 0.523320 rad 
 
 // 將0.523320rad轉為度o
 0.523320rad * (180 / π) = 29.9992352688o 

可參考：

• 《百度文庫：弧度和角度的轉換》
• 《百度百科：弧度》

特殊值：

正弦函式和余弦函式的影像如圖所示：

實體

實體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 = this.color
    this.context.beginPath()
    this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
    this.context.fill()
  }

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

class Boom {
  constructor ({ origin, context, circleCount = 10, area }) {
    this.origin = origin
    this.context = context
    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) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.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: this.context,
        origin: this.origin,
        color: this.randomColor(),
        angle: this.randomRange(Math.PI - 1, Math.PI + 1),
        speed: this.randomRange(1, 6)
      })
      this.circles.push(circle)
    }
  }

  move() {
    this.circles.forEach((circle, index) => {
      if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
        return this.circles.splice(index, 1)
      }
      circle.move()
    })
    if (this.circles.length == 0) {
      this.stop = 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 = new Boom({
      origin: { x: e.clientX, y: e.clientY },
      context: this.computerContext,
      area: {
        width: this.globalWidth,
        height: this.globalHeight
      }
    })
    boom.init()
    this.booms.push(boom)
    this.running || this.run()
  }

  handlePageHide() {
    this.booms = []
    this.running = false
  }

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

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

    document.body.append(this.renderCanvas)

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

  run() {
    this.running = true
    if (this.booms.length == 0) {
      return this.running = false
    }
    requestAnimationFrame(this.run.bind(this))
    this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
    this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)

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

const cursorSpecialEffects = new CursorSpecialEffects()
cursorSpecialEffects.init()

優化后的代碼：

class Circle {
    constructor({origin,context,color,angle,speed}) {
        this.position = {...origin};
        this.context = context;
        this.color = color;
        this.angle = angle;
        this.speed = speed;
        this.renderCount = 0;
    }
    draw() {
        this.context.fillStyle = this.color;
        this.context.beginPath();
        this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2, false);
        this.context.fill();
    }
    move() {
        this.position.x += Math.sin(this.angle) * this.speed;
        this.position.y += Math.cos(this.angle) * this.speed + this.renderCount * 0.3;
        this.renderCount ++;
    }
}

class Boom {
    constructor({origin,context,area,circleNum = 10}) {
        this.origin = origin;
        this.context = context;
        this.area = area;
        this.circleNum = circleNum;
        this.circles = [];
        this.stop = false;
    }
    
    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() {
        for(let i = 0; i < this.circleNum; i++) {
            const circle = new Circle({
                origin: this.origin,
                context: this.context,
                color: this.randomColor(),
                angle: this.randomRange(Math.PI / 2, Math.PI * 3 / 2),
                speed: this.randomRange(1,6)
            })
            this.circles.push(circle);
        }
    }
    
    move() {
        for(let i = 0; i < this.circles.length; i++) {
            const curCircle = this.circles[i];
            if(curCircle.x >= this.area.width || curCircle.y >= this.area.height) {
                this.circles.splice(i,1);
                i--;
                continue;
            }
            curCircle.move();
        }
        if(this.circles.length === 0) {
            this.stop = true;
        }
    }
    
    draw() {
        this.circles.forEach((circle) => circle.draw());
    }
}

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

new MouseClickEffect();

標籤：JavaScript

上一篇：JavaScript事件物件屬性e.target和this的區別

下一篇：var,let,const的區別