如何在语音聊天源码中实现一个满天星效果？

本文主要是介绍如何在语音聊天源码中实现一个满天星效果？，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

思路

整体思路是通过在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();
    }
};

以上便是“如何在语音聊天源码中实现一个满天星效果？”的全部内容，看起来是不是很简单，希望能对大家开发语音聊天源码有帮助。

这篇关于如何在语音聊天源码中实现一个满天星效果？的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！