anvas原生實(shí)現(xiàn)直播視頻彈幕效果钠糊。

原文鏈接

上一篇中用動態(tài)創(chuàng)建DOM元素實(shí)現(xiàn)彈幕效果，好處是可以在DOM元素上添加事件壹哺，但問題是當(dāng)大量彈幕出現(xiàn)會造成頁面卡頓抄伍，于是嘗試用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坐標(biāo)

文本寬度

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

清除繪制內(nèi)容

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

實(shí)現(xiàn)步驟

1、創(chuàng)建canvas元素利用絕對定位覆蓋在視頻上
2箩朴、創(chuàng)建Barrage類岗喉，添加的彈幕緩存到彈幕列表中，并記錄相應(yīng)彈幕信息
3炸庞、繪制彈幕文本钱床，用文本偏移量控制移動速度
4、計算當(dāng)文本超出畫布時移出彈幕列表

代碼

//html
<div 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標(biāo)簽埠居。
    </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);
        }

        //獲取隨機(jī)顏色
        getColor() {
            return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
        }

        //獲取隨機(jī)top
        getTop() {
            //canvas繪制文字x,y坐標(biāo)是按文字左下角計算诞丽，預(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);
    })

})();

效果

效果

總結(jié)

canvas可以實(shí)現(xiàn)很多動畫效果，尤其是當(dāng)我們需要動態(tài)創(chuàng)建大量元素時拐格，使用canvas可以優(yōu)化動畫顯示效果，改善用戶體驗(yàn)刑赶，提升性能捏浊。