javascript实现弹幕墙效果

实现弹幕墙效果的步骤可以归纳为以下几点：

步骤一：准备工作

在HTML页面中添加一个<canvas>元素作为弹幕容器。可设置position: absolute和z-index属性，使其覆盖在其他内容之上。还需要在HTML页面中引入一个用于生成弹幕对象的JS文件。

<canvas id="Danmu" width="800" height="400"></canvas>
<script src="danmu.js"></script>

步骤二：初始化设置

在JS文件中定义弹幕对象的构造函数以及一些基本属性和方法。创建一个弹幕对象时，可以设置弹幕文本、字体大小、字体颜色、x轴初始位置、y轴初始位置和运动速度等属性。还需要设置每个弹幕对象的x轴方向（从左到右还是从右到左）。

function Danmu(text, x, y, color, size, speed, direction) {
  this.text = text; // 弹幕文本
  this.x = x; // 弹幕x轴位置
  this.y = y; // 弹幕y轴位置
  this.color = color; // 字体颜色
  this.size = size; // 字体大小
  this.speed = speed; // 运动速度
  this.direction = direction; // 弹幕x轴方向，从左到右或从右到左
  this.width = ctx.measureText(this.text).width; // 弹幕文本宽度
}

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

Danmu.prototype.move = function () {
  if (this.direction === "left") {
    this.x -= this.speed;
  } else if (this.direction === "right") {
    this.x += this.speed;
  }
};

步骤三：生成弹幕

在JS文件中定义一个用于生成弹幕的函数。该函数可以接收一个数组参数data，包含需要生成的弹幕文本。

function generateDanmu(data) {
  for (var i = 0; i < data.length; i++) {
    var text = data[i].text;
    var x = canvas.width;
    var y = randomNum(20, canvas.height - 20);
    var color = randomColor();
    var size = randomNum(18, 30);
    var speed = randomNum(2, 6);
    var direction = randomNum(0, 1) === 0 ? "right" : "left";
    var danmu = new Danmu(text, x, y, color, size, speed, direction);
    danmuList.push(danmu);
  }
}

步骤四：设置定时器

在JS文件中定义一个定时器，以固定时间间隔（例如10毫秒）更新弹幕对象的位置并重绘弹幕墙。

setInterval(function () {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < danmuList.length; i++) {
    var danmu = danmuList[i];
    danmu.move();
    danmu.render();
  }
}, 10);

示例一

假设我们有一个包含三条弹幕文本的数组数据：

var data = [
  { text: "这是第一条弹幕" },
  { text: "这是第二条弹幕" },
  { text: "这是第三条弹幕" },
];

可以调用generateDanmu(data)生成三条随机属性的弹幕对象，并将其保存在一个全局数组danmuList中。

示例二

我们也可以通过表单提交数据来生成弹幕。例如，在HTML页面中添加一个表单，用户可以输入弹幕文本、字体大小、字体颜色等信息，并点击按钮提交表单。

HTML代码：

<form id="danmu-form">
  <input type="text" name="text" placeholder="请输入弹幕文本">
  <input type="number" name="size" min="18" max="30" placeholder="请输入字体大小">
  <input type="color" name="color" placeholder="请选择字体颜色">
  <button type="submit">提交</button>
</form>

JS代码：

var form = document.getElementById("danmu-form");
var inputText = form.querySelector("[name='text']");
var inputSize = form.querySelector("[name='size']");
var inputColor = form.querySelector("[name='color']");

form.addEventListener("submit", function (event) {
  event.preventDefault();
  var text = inputText.value;
  var size = inputSize.value || randomNum(18, 30);
  var color = inputColor.value || randomColor();
  var danmu = new Danmu(
    text,
    canvas.width,
    randomNum(20, canvas.height - 20),
    color,
    size,
    randomNum(2, 6),
    "left"
  );
  danmuList.push(danmu);
  inputText.value = "";
  inputSize.value = "";
  inputColor.value = "";
});

这里生成的弹幕对象属性中，x轴初始位置设置为canvas.width，y轴初始位置随机生成，x轴方向设置为从右至左，其他属性按用户输入或随机数生成。用户点击提交按钮后，会生成一个新的弹幕对象，并加入到danmuList数组末尾。