本文实例为大家分享了js实现静态滚动弹幕的具体代码，供大家参考，具体内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- 因特网www.inte.net弹幕文字测试 --><div class="video-x"></div> <script type="text/javascript" src="https://www.inte.net/template/default/js/jquery-2.1.4.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> |
