canvas实现弹幕效果

Html

Css

(function() {

class Barrage {
        constructor(canvas) {
            this.canvas = document.getElementById(canvas);
            let rect = this.canvas.getBoundingClientRect();
            this.w = rect.right - rect.left;
            this.h = rect.bottom - rect.top;
            this.ctx = this.canvas.getContext('2d');
            this.ctx.font = '20px Microsoft YaHei';
            this.barrageList = [];
        }

//添加弹幕列表
        shoot(value) {
            let top = this.getTop();
            let color = this.getColor();
            let offset = this.getOffset();
            let width = Math.ceil(this.ctx.measureText(value).width);

let barrage = {
                value: value,
                top: top,
                left: this.w,
                color: color,
                offset: offset,
                width: width
            }
            this.barrageList.push(barrage);
        }

//开始绘制
        draw() {
            if (this.barrageList.length) {
                this.ctx.clearRect(0, 0, this.w, this.h);
                for (let i = 0; i < this.barrageList.length; i++) {
                    let b = this.barrageList[i];
                    if (b.left + b.width <= 0) {
                        this.barrageList.splice(i, 1);
                        i--;
                        continue;
                    }
                    b.left -= b.offset;
                    this.drawText(b);
                }
            }
            requestAnimationFrame(this.draw.bind(this));
        }

//绘制文字
        drawText(barrage) {
            this.ctx.fillStyle = barrage.color;
            this.ctx.fillText(barrage.value, barrage.left, barrage.top);
        }

//获取随机颜色
        getColor() {
            return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
        }

//获取随机top
        getTop() {
            //canvas绘制文字x,y坐标是按文字左下角计算，预留30px
            return Math.floor(Math.random() * (this.h - 30)) + 30;
        }

//获取偏移量
        getOffset() {
            return +(Math.random() * 4).toFixed(1) + 1;
        }

}

let barrage = new Barrage('canvas');
    barrage.draw();

const textList = ['弹幕', '666', '233333333',
        'javascript', 'html', 'css', '前端框架', 'Vue', 'React',
        'Angular', '测试弹幕效果', '弹幕', '666', '233333333',
        'javascript', 'html', 'css', '前端框架', 'Vue', 'React',
        'Angular', '测试弹幕效果', '弹幕', '666', '233333333',
        'javascript', 'html', 'css', '前端框架', 'Vue', 'React',
        'Angular', '测试弹幕效果'
    ];

textList.forEach((t) => {
        barrage.shoot(t);
    })

})();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas实现弹幕效果



代码描述：canvas原生实现直播视频弹幕效果。

实现步骤：
1、创建canvas元素利用绝对定位覆盖在视频上
2、创建Barrage类，添加的弹幕缓存到弹幕列表中，并记录相应弹幕信息
3、绘制弹幕文本，用文本偏移量控制移动速度4、计算当文本超出画布时移出弹幕列表

1

最新

发表评论全部评论

暂时没有评论！

不要说话丶0

2018/5/18 17:21:19

肥嘟嘟
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

vist

相关代码

canvas实现弹幕效果

实现步骤：

最新