HTML5 canvas实现的静态循环滚动播放弹幕

admin HTML5

2023-12-02 0 954

本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕，分享给大家，具体如下：

使用方法和API

语法如下：

canvasBarrage(canvas, data);

其中：

canvas

canvas 表示我们的 <canvas> 画布元素，可以直接是DOM元素，也可以是 <canvas> 画布元素的选择器。

data

data 表示弹幕数据，是一个数组。例如下面：

[{
value: \’弹幕1\’,
color: \’blue\’,
range: [0, 0.5]
}, {
value: \’弹幕2\’,
color: \’red\’,
range: [0.5, 1]
}]

可以看到数组中的每一个值表示一个弹幕的信息对象。其中 value 表示弹幕的文字内容； color 表示弹幕描边的颜色（弹幕文字本身默认是白色）； range 表示弹幕在画布中的区域范围，例如 [0, 0.5] 表示弹幕在画布中的上半区域显示， [0.5, 1] 表示弹幕在画布中的下半区域显示。

然后就可以看到无限滚动的弹幕效果了。

补充说明：

此弹幕效果默认文字大小是 28px ，并且文字加粗，如果这个效果不符合您的需求，需要在 canvasBarrage() 方法中修改源代码。因为本来就是个简单静态效果，因此没有专门设计成API。
此弹幕效果默认是白色文字加可变颜色描边，同样的，如果这个效果不符合您的需求，需要在 canvasBarrage() 方法中修改源代码。
跟真实的弹幕效果有所不同，这里的弹幕出现的速度和时机不是基于特定时间，而是随机产生。所以看到有些文字好像开飞机，而有些文字好像坐着拖拉机。因为是死数据，这样设计会看上去更真实写。

源代码：

.canvas-barrage {
position: absolute;
width: 640px;
height: 360px;
}
.video-placeholder {
height: 360px;
background-color: #000;
animation: bgColor 10s infinite alternate;
}
@keyframes bgColor {
25% {
background-color: darkred;
}
50% {
background-color: darkgreen;
}
75% {
background-color: darkblue;
}
100% {
background-color: sliver;
}
}
</style>

// 弹幕方法
var canvasBarrage = function (canvas, data) {
if (!canvas || !data || !data.length) {
return;
}
if (typeof canvas == \’string\’) {
canvas = document.querySelector(canvas);
canvasBarrage(canvas, data);
return;
}
var context = canvas.getContext(\’2d\’);
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

// 存储实例
var store = {};

// 字号大小
var fontSize = 28;

// 实例方法
var Barrage = function (obj, index) {
// 随机x坐标也就是横坐标，对于y纵坐标，以及变化量moveX
this.x = (1 + index * 0.1 / Math.random()) * canvas.width;
this.y = obj.range[0] * canvas.height + (obj.range[1] – obj.range[0]) * canvas.height * Math.random() + 36;
if (this.y < fontSize) {
this.y = fontSize;
} else if (this.y > canvas.height – fontSize) {
this.y = canvas.height – fontSize;
}
this.moveX = 1 + Math.random() * 3;

this.opacity = 0.8 + 0.2 * Math.random();
this.params = obj;

this.draw = function () {
var params = this.params;
// 根据此时x位置绘制文本
context.strokeStyle = params.color;
context.font = \’bold \’ + fontSize + \’px "microsoft yahei", sans-serif\’;
context.fillStyle = \’rgba(255,255,255,\’ + this.opacity + \’)\’;
context.fillText(params.value, this.x, this.y);
context.strokeText(params.value, this.x, this.y);
};
};

data.forEach(function (obj, index) {
store[index] = new Barrage(obj, index);
});

// 绘制弹幕文本
var draw = function () {
for (var index in store) {
var barrage = store[index];
// 位置变化
barrage.x -= barrage.moveX;
if (barrage.x < -1 * canvas.width * 1.5) {
// 移动到画布外部时候从左侧开始继续位移
barrage.x = (1 + index * 0.1 / Math.random()) * canvas.width;
barrage.y = (barrage.params.range[0] + (barrage.params.range[1] – barrage.params.range[0]) * Math.random()) * canvas.height;
if (barrage.y < fontSize) {
barrage.y = fontSize;
} else if (barrage.y > canvas.height – fontSize) {
barrage.y = canvas.height – fontSize;
}
barrage.moveX = 1 + Math.random() * 3;
}
// 根据新位置绘制圆圈圈
store[index].draw();
}
};