js cavans实现静态滚动弹幕
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了js cavans实现静态滚动弹幕，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现静态滚动弹幕的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 弹幕文字 -->
<div class="video-x"></div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// 弹幕
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: "狼蚁网站SEO优化就是占位弹幕了",
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.height = '';
// 存储实例
var store = {};
// 字号大小
var fontSize = 12;
// 实例方法
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();
};
var canvas = '<canvas id="canvasBarrage" class="canvas-barrage"></canvas>'
$('.video-x').html(canvas);
canvasBarrage("#canvasBarrage", dataBarrage);
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。