Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /** 文段集合 */
- var ParagraphsHub = (function() {
- var data = [
- '6666666666666666',
- '第一第一',
- '哪哪哪哪',
- '测试',
- '什么什么什么',
- '67676767676',
- '垃圾啊',
- '什么鬼呀',
- '快来看呀',
- '我的我的我的',
- '坏蛋坏蛋',
- '刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏',
- '6666666666666666666666666',
- '什么东西hahahhahahhahah',
- '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
- '啊',
- '!',
- '测试'
- ];
- var dataCount = data.length;
- return {
- fetch: function(count) {
- // 模拟 数据 获取 逻辑可以改掉, 比如改成从远程服务器获取,
- // 只要返回结果是个Promise并且最后得到的是一个字符串数组
- var rCount = Math.floor(Math.random() * count + 1);
- var list = [];
- while (rCount--) {
- var index = Math.floor(Math.random() * dataCount);
- list.push(data[index]);
- }
- return new Promise(function(resolve, reject) {
- resolve(list);
- });
- }
- };
- })();
- /**
- * 弹幕舞台
- * ------------------------
- * | xxxxx xxxxx x|***
- * | xxxxxxxxxxx xxx|******** *****
- * | x xxx |
- * | |
- * ------------------------
- */
- var DMStage = (function() {
- var TRACKS = 5;
- var MAX_TRACKS = 10;
- // constructor
- function DMStage(canvasId) {
- this._canvas = document.getElementById(canvasId);
- // 挂起弹幕数
- this._pendingParagraphs = [];
- // 弹幕轨道
- this._paragraphTracks = [];
- // 弹幕轨道排版中最后一条的位置
- this._lastParagraphPos = [];
- window.addEventListener('resize', _resize.bind(this));
- _resize.call(this);
- }
- // public methods //////////////////////////////////////////////////////////
- var api = DMStage.prototype;
- api.show = function(text) {
- //var textWidth = _measureText.call(this, text)
- console.log(text);
- };
- // private methods /////////////////////////////////////////////////////////
- function _resize() {
- this._canvas.width = document.documentElement.clientWidth;
- this._canvas.height = document.documentElement.clientHeight;
- }
- function _measureText(text) {
- var ctx = this._canvas.getContext("2d");
- ctx.font = "30px Arial";
- return ctx.measureText(text);
- }
- return DMStage;
- })();
- // main ////////////////////////////////////////////////////////////////////////
- var stage = new DMStage('dm-stage');
- // 弹幕更新
- next(100);
- function next(delay) {
- setTimeout(function() {
- ParagraphsHub.fetch(30)
- .then(function(list) {
- stage.show(list);
- // 下一波
- next();
- });
- }, delay || Math.floor(Math.random() * 6000 + 1000));
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement