Canvas弹幕实现

ChristmasBoy 发布于2019-08-21 17:15 / 847人阅读

摘要：原生实现直播视频弹幕效果。上一篇中用动态创建元素实现弹幕效果，好处是可以在元素上添加事件，但问题是当大量弹幕出现会造成页面卡顿，于是尝试用绘制弹幕效果。

canvas原生实现直播视频弹幕效果。

上一篇中用动态创建DOM元素实现弹幕效果，好处是可以在DOM元素上添加事件，但问题是当大量弹幕出现会造成页面卡顿，于是尝试用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、计算当文本超出画布时移出弹幕列表

代码

//html

    

    


//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);
    })

})();

效果

总结

canvas可以实现很多动画效果，尤其是当我们需要动态创建大量元素时，使用canvas可以优化动画显示效果，改善用户体验，提升性能。

云服务器 GPU云服务器弹幕实现 Canvas _canvas 2canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89320.html

Canvas + WebSocket + Redis 实现一个视频弹幕

摘要：创建弹幕功能的类及基本参数处理布局时需要注意的默认宽为，高为，我们要保证完全覆盖整个视频，需要让与宽高相等。因为我们不确定每一个使用该功能的视频的宽高都是一样的，所以画布的宽高并没有通过来设置，而是通过在类创建实例初始化属性的时候动态设置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 阅读原文页面布...

WelliJhon 2019-08-29 16:55 评论0 收藏0
Canvas + WebSocket + Redis 实现一个视频弹幕

摘要：创建弹幕功能的类及基本参数处理布局时需要注意的默认宽为，高为，我们要保证完全覆盖整个视频，需要让与宽高相等。因为我们不确定每一个使用该功能的视频的宽高都是一样的，所以画布的宽高并没有通过来设置，而是通过在类创建实例初始化属性的时候动态设置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 阅读原文页面布...

gekylin 2019-08-02 11:41 评论0 收藏0
Canvas + WebSocket + Redis 实现一个视频弹幕

摘要：创建弹幕功能的类及基本参数处理布局时需要注意的默认宽为，高为，我们要保证完全覆盖整个视频，需要让与宽高相等。因为我们不确定每一个使用该功能的视频的宽高都是一样的，所以画布的宽高并没有通过来设置，而是通过在类创建实例初始化属性的时候动态设置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 阅读原文页面布...

wangdai 2019-08-23 12:19 评论0 收藏0
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

摘要：之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。实现弹幕除了通过实现弹幕的方法之外，通过也可以实现弹幕。通过实现弹幕的原理就是时时的重绘文字，下面来一步步的实现。之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。 css3实现乞丐版的弹...

greatwhole 2019-08-30 15:54 评论0 收藏0
弹幕，是怎样练成的？

showImg(https://segmentfault.com/img/bVbk1Nl?w=1080&h=602); 说起弹幕看过视频的都不会陌生，那满屏充满着飘逸评论的效果，让人如痴如醉，无法自拔最近也是因为在学习关于 canvas 的知识，所以今天就想和大家分享一个关于弹幕的故事那么究竟弹幕是怎样炼成的呢？我们且往下看(look) 看什么？看效果 showImg(https://s...

lwx12525 2019-08-23 14:02 评论0 收藏0