js cavans实现静态滚动弹幕

1. 简介

Cavans 是 HTML5 新增的元素，它可以让开发者在浏览器上绘制图形、动画等。本篇攻略讲解如何使用 Canvas 实现静态的滚动弹幕。

2. 准备工作

为了使用 Canvas 实现滚动弹幕，需要先在 HTML 中添加一个 Canvas 元素。以下是添加 Canvas 元素的示例代码：

<canvas id="myCanvas"></canvas>

接着，为了在此 Canvas 上绘制弹幕，需要在 JS 中定义 Canvas 对象。这样就可以通过该对象来控制 Canvas 元素。

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

其中 ctx 是 CanvasRenderingContext2D 对象，它提供了各种方法来操作 Canvas 元素。

3. 绘制静态弹幕

接下来，我们对 Canvas 进行相关设置并绘制简单粗暴的静态弹幕。以下是示例代码：

// 设置 Canvas 宽高
canvas.width = 500;
canvas.height = 300;

// 绘制一个黑色底色的矩形，用于清除画布
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制一个白色的文字
ctx.font = '20px Arial';
ctx.fillStyle = '#fff';
ctx.fillText('Hello World!', 100, 150);

以上代码将在指定位置绘制了一个白色的“Hello World!”，并且在绘制前，先清空整个画布。此时，浏览器中会显示黑色底色，中间有一行白色的“Hello World!”字样。

4. 实现滚动弹幕

以上绘制的弹幕是静态的，下面我们来实现滚动弹幕的效果。首先，我们需要创建一个弹幕对象：

// 创建弹幕对象
function Danmu(text, speed, x, y) {
  this.text = text;
  this.speed = speed;
  this.x = x;
  this.y = y;
  this.width = ctx.measureText(text).width;
}

由于我们需要在画布上滚动弹幕，因此，我们可以通过将多个弹幕对象存放在数组中，然后在每个时间段内遍历数组并更新弹幕的 x 坐标值来实现滚动效果。在遍历数组绘制弹幕时，如果某个弹幕的 x 坐标超过了画布宽度，则将其从数组中删除以保证性能。示例代码如下：

// 定义弹幕数组
var danmus = [];

// 添加多个弹幕对象到数组中
danmus.push(new Danmu('Danmu1', 2, canvas.width, 60));
danmus.push(new Danmu('Danmu2', 3, canvas.width, 120));
danmus.push(new Danmu('Danmu3', 4, canvas.width, 180));

// 遍历弹幕数组并更新弹幕位置
function update() {
  // 清理画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 遍历弹幕数组并绘制
  for (var i = 0; i < danmus.length; ) {
    var danmu = danmus[i];
    danmu.x -= danmu.speed;

    if (danmu.x + danmu.width < 0) {
      danmus.splice(i, 1);
      continue;
    }

    ctx.font = '20px Arial';
    ctx.fillStyle = '#fff';
    ctx.fillText(danmu.text, danmu.x, danmu.y);

    i++;
  }
}

// 循环调用 update 方法实现弹幕滚动
setInterval(update, 20);

以上代码添加了 danmus 数组和一个 update 方法。update 方法的作用是清空画布、遍历弹幕数组并更新弹幕的 x 坐标以及在画布上绘制弹幕。最后，通过 setInterval 方法来循环调用 update 方法，以此来实现弹幕的滚动效果。

5. 示例说明

以下是使用 Canvas 实现静态滚动弹幕的两个示例：

示例一

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

// 设置 Canvas 宽高
canvas.width = 500;
canvas.height = 300;

// 绘制一个黑色底色的矩形，用于清除画布
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制一个白色的文字
ctx.font = '20px Arial';
ctx.fillStyle = '#fff';
ctx.fillText('Hello World!', 100, 150);

以上代码将在指定位置绘制了一个白色的“Hello World!”，并且在绘制前，先清空整个画布。

示例二

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

// 设置 Canvas 宽高
canvas.width = 500;
canvas.height = 300;

// 创建弹幕对象
function Danmu(text, speed, x, y) {
  this.text = text;
  this.speed = speed;
  this.x = x;
  this.y = y;
  this.width = ctx.measureText(text).width;
}

// 定义弹幕数组
var danmus = [];

// 添加多个弹幕对象到数组中
danmus.push(new Danmu('Danmu1', 2, canvas.width, 60));
danmus.push(new Danmu('Danmu2', 3, canvas.width, 120));
danmus.push(new Danmu('Danmu3', 4, canvas.width, 180));

// 遍历弹幕数组并更新弹幕位置
function update() {
  // 清理画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 遍历弹幕数组并绘制
  for (var i = 0; i < danmus.length; ) {
    var danmu = danmus[i];
    danmu.x -= danmu.speed;

    if (danmu.x + danmu.width < 0) {
      danmus.splice(i, 1);
      continue;
    }

    ctx.font = '20px Arial';
    ctx.fillStyle = '#fff';
    ctx.fillText(danmu.text, danmu.x, danmu.y);

    i++;
  }
}

// 循环调用 update 方法实现弹幕滚动
setInterval(update, 20);

以上代码创建了 danmus 数组和一个 update 方法。update 方法的作用是清空画布、遍历弹幕数组并更新弹幕的 x 坐标以及在画布上绘制弹幕。最后，通过 setInterval 方法来循环调用 update 方法，以此来实现弹幕的滚动效果。