js 实现弹幕效果的两种方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了js 实现弹幕效果的两种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在JavaScript中实现弹幕效果可以用HTML5的canvas元素和定时器来完成。以下是一个简单的实现示例：

首先，在HTML文件中创建画布元素，并在CSS中设置其位置和大小：

<canvas id="canvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>

接着，在JavaScript中获取画布元素并创建画布上下文对象：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

然后，定义一个弹幕类，包含文本、颜色、字体大小、位置和速度等属性：

function Danmu(text, color, fontSize, x, y, speed) {
  this.text = text;
  this.color = color;
  this.fontSize = fontSize;
  this.x = x;
  this.y = y;
  this.speed = speed;
}

在弹幕类中添加绘制弹幕的方法：

Danmu.prototype.draw = function() {
  ctx.fillStyle = this.color;
  ctx.font = this.fontSize + "px Arial";
  ctx.fillText(this.text, this.x, this.y);
};

然后，在页面加载完毕后，创建一个弹幕数组和若干个初始弹幕，并使用定时器不断更新弹幕的位置和绘制：

window.onload = function() {
  var danmus = [];
  
  // 创建初始弹幕
  for (var i = 0; i < 10; i++) {
    var text = "弹幕" + i;
    var color = "#" + ((1 << 24) * Math.random() | 0).toString(16); // 生成随机颜色
    var fontSize = Math.floor(Math.random() * 20 + 20); // 生成随机字体大小
    var y = Math.floor(Math.random() * canvas.height); // 生成随机Y轴位置
    danmus.push(new Danmu(text, color, fontSize, canvas.width, y, Math.random() * 2 + 2));
  }
  
  // 定时器更新弹幕位置和绘制
  setInterval(function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < danmus.length; i++) {
      danmus[i].x -= danmus[i].speed;
      if (danmus[i].x < -ctx.measureText(danmus[i].text).width) { // 判断是否越界，越界则重置位置
        danmus[i].x = canvas.width;
        danmus[i].y = Math.floor(Math.random() * canvas.height);
      }
      danmus[i].draw();
    }
  }, 20);
};

这样就可以在画布上实现一个简单的弹幕效果了。

以下是一个使用JavaScript实现微信程序弹幕效果的示例代码：

HTML代码：

<view class="danmu-container"></view>

CSS代码：

.danmu-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}
.danmu-item {
  position: absolute;
  white-space: nowrap;
}

JavaScript代码：

// 获取弹幕容器
const danmuContainer = document.querySelector('.danmu-container');

// 弹幕数据
const danmuData = [
  { text: '这是一条弹幕1', color: '#ffffff', speed: 5 },
  { text: '这是一条弹幕2', color: '#ff0000', speed: 8 },
  { text: '这是一条弹幕3', color: '#00ff00', speed: 10 }
];

// 添加弹幕
function addDanmu() {
  // 随机获取一条弹幕数据
  const index = Math.floor(Math.random() * danmuData.length);
  const data = danmuData[index];

  // 创建弹幕元素，并设置样式和内容
  const danmuItem = document.createElement('view');
  danmuItem.classList.add('danmu-item');
  danmuItem.innerText = data.text;
  danmuItem.style.color = data.color;

  // 将弹幕元素添加到容器中，并设置初始位置
  danmuContainer.appendChild(danmuItem);
  const containerHeight = danmuContainer.clientHeight;
  const itemHeight = danmuItem.offsetHeight;
  danmuItem.style.top = Math.floor(Math.random() * (containerHeight - itemHeight)) + 'px';

  // 控制弹幕移动
  const containerWidth = danmuContainer.clientWidth;
  let left = containerWidth;
  const move = () => {
    left -= data.speed;
    if (left < -danmuItem.offsetWidth) {
      danmuContainer.removeChild(danmuItem);
      clearInterval(timer);
    } else {
      danmuItem.style.left = left + 'px';
    }
  };
  const timer = setInterval(move, 10);
}

// 处理用户操作
let isPaused = false;
function pauseDanmu() {
  isPaused = true;
}
function resumeDanmu() {
  isPaused = false;
}

// 添加定时器，间隔一段时间添加一条弹幕
setInterval(() => {
  if (!isPaused) {
    addDanmu();
  }
}, 1000);