Canvas彈幕實現

ChristmasBoy 發布于2019-08-21 17:15 / 846人閱讀

摘要：原生實現直播視頻彈幕效果。上一篇中用動態創建元素實現彈幕效果，好處是可以在元素上添加事件，但問題是當大量彈幕出現會造成頁面卡頓，于是嘗試用繪制彈幕效果。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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