用H5的canvas做出弹幕效果

canvas知识

绘制文字

let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    ctx.font = '20px Microsoft YaHei';
              //字体、大小ctx.fillStyle = '#000000';
                      //字体颜色ctx.fillText('canvas 绘制文字', 100, 100);
       //文本，字体x,y坐标

文本宽度

ctx.measureText('文本宽度').width

清除绘制内容

ctx.clearRect(0, 0, width, height);
    

实现步骤

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

代码

//htMLdiv style="posITion:relative;
    width:500px;
    height:400px;
    text-align:center;
    ">
        video controls="controls" autoplay="autoplay" style="width:100%;
    height:100%;
    ">
            source src="http://www.w3school.COM.cn/i/movie.ogg" tyPE="video/ogg" />
            source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />
             Your browser does not support the video tag.    /video>
        canvas id="canvas" width="500" height="400" style="position:absolute;
    top:0;
    left:0;
    ">
            您的浏览器不支持canvas标签。    /canvas>
    /div>
//js(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','测试弹幕效果'    ];
        textList.foreach((t) =>
 {
            barrage.shoot(t);
    }
)}
    )();
    

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

前端开发中的SVG动画

canvas怎样做出黑色背景带特效碎屑烟花

以上就是用H5的canvas做出弹幕效果的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！