思路

整體思路是通過在canvas上繪製許多小圓點，然後開啟一個定時器移動所有小圓點，同時監聽滑鼠位置，當滑鼠位置與小圓點的位置小於某個設定值時，就用一條直線將它們連線起來。這樣就能在語音聊天原始碼中實現一個滿天星效果了。

1、定義初始值

var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
var canvas = document.getElementById("myCanvas");
// 獲取畫筆
var ctx = canvas.getContext("2d"); 
// 設定寬高
canvas.width = width;
canvas.height = height;
// 改變填充色
ctx.fillStyle = "white";
// 改變線條顏色
ctx.strokeStyle = "rgba(255, 255, 123, .5)";
// 改變線寬
ctx.lineWidth = ".3";

2、定義星星類

引數依次為（畫筆，x座標，y座標，半徑），並且定義一個隨機的控制速度和方向的值(如下):

function Star(ctx, x, y, r) {
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.r = r;
    this.x_speed =
      ((parseInt(Math.random() * 3) + 1) *
        Math.pow(-1, parseInt(Math.random() * 10) + 1)) / 5;
    this.y_speed =
      ((parseInt(Math.random() * 3) + 1) *
        Math.pow(-1, parseInt(Math.random() * 10) + 1)) / 5;
}

然後在它的原型上新增移動的方法，上面的隨機速度值就起到了作用：

Star.prototype.move = function () {
    this.x += this.x_speed;
    this.y += this.y_speed;
};

再新增渲染方法:

Star.prototype.render = function () {
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    this.ctx.closePath();
    this.ctx.fill();
};

此時星星會出語音聊天原始碼的顯示區域，我們需要邊界判斷，到達邊界則用相反的速度值:

Star.prototype.changeX = function () {
    this.x_speed = -this.x_speed;
};
Star.prototype.changeY = function () {
    this.y_speed = -this.y_speed;
};

3、例項化100顆星星

當物件比較多的時候，用陣列來儲存：

var arr = [];
for (var i = 0; i < 100; i++) {
    arr.push(
      new Star(ctx, Math.random() * width, Math.random() * height, 1)
    );
}

4、建立滑鼠位置的星星

根據效果，還有一顆星星位於滑鼠的頂點，通過滑鼠移動事件來觸發，實時獲取頂點位置：

var mouse_star = new Star(ctx, 0, 0, 2);
document.onmousemove = function (e) {
    var mouse_x = e.clientX;
    var mouse_y = e.clientY;
    mouse_star.x = mouse_x;
    mouse_star.y = mouse_y;
};

5、開啟定時器動畫

第一步是清屏，可以理解為動畫是每一幀畫面的集合，進行下一幀時，如果不清除前面幀的動畫，則星星會變成向四處發生的射線：

// 定時器
var timer = setInterval(function () {
    // 清屏
    ctx.clearRect(0, 0, width, height);
    // 渲染滑鼠星星
    mouse_star.render();
    arr.forEach(function (value, index) {
      value.move();
      // 判斷邊界
      if (value.x < 0 || value.x > width) {
        value.changeX();
      }
      if (value.y < 0 || value.y > height) {
        value.changeY();
      }
      value.render();
    });
    arr.forEach(function (value, index) {
      for (var i = index + 1; i < arr.length; i++) {
        if (
          Math.abs(value.x - arr[i].x) < 50 &&
          Math.abs(value.y - arr[i].y) < 50
        ) {
          line(value.x, value.y, arr[i].x, arr[i].y);
        }
      }
      // 判斷星星與其它所有星星之間的關係
      if (
        Math.abs(value.x - mouse_star.x) < 150 &&
        Math.abs(value.y - mouse_star.y) < 150
      ) {
        // 連線
        line(value.x, value.y, mouse_star.x, mouse_star.y);
      }
    });
}, 20);
// 封裝函式，傳遞兩個點，繪製兩個點之間的線段
function line(x1, y1, x2, y2) {
    // 開啟路徑
    ctx.beginPath();
    // 移動畫筆到某個位置
    ctx.moveTo(x1, y1);
    // 繪製路徑
    ctx.lineTo(x2, y2);
    // 關閉路徑
    ctx.closePath();
    // 描邊
    ctx.stroke();
}

6、加一個滑鼠點選的效果

滑鼠點選的時候，在滑鼠的位置向四面八方發射5顆星星，也就是繼續向陣列中新增5顆星星，但是不能光建立，隨著點選次數越來越多，容易卡死，所以當在語音聊天原始碼中建立的時候，移除掉相應個數的星星:

document.onmousedown = function (e) {
    var mouse_x = e.clientX;
    var mouse_y = e.clientY;
    for (var i = 0; i < 5; i++) {
      arr.push(new Star(ctx, mouse_x, mouse_y, 1));
      arr.shift();
    }
};

以上便是“如何在語音聊天原始碼中實現一個滿天星效果？”的全部內容，看起來是不是很簡單，希望能對大家開發語音聊天原始碼有幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理

在語音聊天原始碼中實現一個滿天星效果，應該如何做？

思路

相關文章