共计 3878 个字符，预计需要花费 10 分钟才能阅读完成。
应用办法和 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()办法中批改源代码。 - 跟实在的弹幕成果有所不同，这里的弹幕呈现的速度和机会不是基于特定工夫，而是随机产生。所以看到有些文字如同开飞机，而有些文字如同坐着拖拉机。因为是死数据，这样设计会看上去更实在写。
源代码：
<style>
.video-x {
position: relative;
width: 640px;
margin: auto;
}
.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>
<div class="video-x">
<canvas id="canvasBarrage" class="canvas-barrage"></canvas>
<div class="video-placeholder"></div>
</div>
<script>
// 弹幕数据
var dataBarrage = [{
value: '应用的是动态死数据',
color: 'blue',
range: [0, 0.5]
}, {
value: '随机循环播放',
color: 'blue',
range: [0, 0.6]
}, {
value: '能够管制区域和垂直散布范畴',
color: 'blue',
range: [0, 0.5]
}, {
value: '字体大小和速度在办法内设置',
color: 'black',
range: [0.1, 1]
}, {
value: '适宜用在一些动态页面上',
color: 'black',
range: [0.2, 1]
}, {
value: '基于 canvas 实现',
color: 'black',
range: [0.2, 0.9]
}, {
value: '因而 IE9+ 浏览器才反对',
color: 'black',
range: [0.2, 1]
}, {
value: '能够设置边框色彩',
color: 'black',
range: [0.2, 1]
}, {
value: '文字色彩默认都是红色',
color: 'black',
range: [0.2, 0.9]
}, {
value: '若文字色彩不想红色',
color: 'black',
range: [0.2, 1]
}, {
value: '须要本人调整下 JS',
color: 'black',
range: [0.6, 0.7]
}, {
value: '如果须要的是实在和视频交互的弹幕',
color: 'black',
range: [0.2, 1]
}, {
value: '能够回到原文',
color: 'black',
range: [0, 0.9]
}, {
value: '查看另外一个 demo',
color: 'black',
range: [0.7, 1]
}, {
value: '上面就是占位弹幕了',
color: 'black',
range: [0.7, 0.95]
}, {
value: '后方高能预警！！！',
color: 'orange',
range: [0.5, 0.8]
}, {
value: '后方高能预警！！！',
color: 'orange',
range: [0.5, 0.9]
}, {
value: '后方高能预警！！！',
color: 'orange',
range: [0, 1]
}, {
value: '后方高能预警！！！',
color: 'orange',
range: [0, 1]
}];
// 弹幕办法
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();}
};
// 画布渲染
var render = function () {
// 革除画布
context.clearRect(0, 0, canvas.width, canvas.height);
// 绘制画布上所有的圆圈圈
draw();
// 持续渲染
requestAnimationFrame(render);
};
render();};
canvasBarrage('#canvasBarrage', dataBarrage);
</script>正文完