js cavans实现静态滚动弹幕
程序员文章站
2022-06-25 08:14:23
本文实例为大家分享了js实现静态滚动弹幕的具体代码,供大家参考,具体内容如下
本文实例为大家分享了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: "下面就是占位弹幕了", 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。