Canvas弹幕实现

朱雀 2021-06-10 20:38 597阅读 0赞

# 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
    <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标签。
        </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);
        })
    
    })();

# 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o2OTE4Mzc4Nw_size_16_color_FFFFFF_t_70][]

# 总结 #

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

# JS DOM版本 #

# 实现原理 #

1、设置展示弹幕元素位置属性为relative  
2、动态创建弹幕元素，位置属性设置absolute，left为展示宽度  
3、随机设置弹幕元素top值  
4、随机产生弹幕元素移动速率，修改left值

# 随机颜色 #

第一种实现
    let color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
    
    第二种实现
    let color = '#' + Math.floor(Math.random() * 16777215).toString(16)；
    
    第三种实现
    let r = Math.floor(Math.random()*256);
    let g = Math.floor(Math.random()*256);
    let b = Math.floor(Math.random()*256);
    let color = `rgb(${r},${g},${b})`;

# 随机速率 #

50 * +Math.random().toFixed(2)

# 代码 #

//html
    <div class="container">
        <div id="content" class="content"></div>
        <div class="content-opt">
            <div id="content-text" class="content-text"></div>
            <div class="content-input">
                <input id="text" type="text">
                <button id="send">发送</button>
            </div>
        </div>
    </div>
    
    //css
    * {
        box-sizing: border-box;
        outline: none;
    }
    
    p {
        margin: .5em;
        word-break: break-all;
    }
    
    .container {
        position: relative;
        width: 700px;
        height: 500px;
        margin: auto;
        padding-right: 200px;
    }
    
    .content {
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
    }
    
    .content-opt {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 100%;
    }
    
    .content-text {
        height: calc(100% - 30px);
        margin-bottom: 30px;
        border: 1px solid #ccc;
        overflow: auto;
    }
    
    .content-input {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30px;
        border: 1px solid #ccc;
    }
    
    .content-input input {
        width: 70%;
        padding: 2px;
        border-radius: 5px;
    }
    
    .content-input button {
        padding: 3px 10px;
        border: none;
        border-radius: 5px;
        background: rgb(90, 154, 214);
    }
    
    //js
    (function () {
        class Barrage {
            constructor(id) {
                this.domList = [];
                this.dom = document.querySelector('#' + id);
                if (this.dom.style.position == '' || this.dom.style.position == 'static') {
                    this.dom.style.position = 'relative';
                }
                this.dom.style.overflow = 'hidden';
                let rect = this.dom.getBoundingClientRect();
                this.domWidth = rect.right - rect.left;
                this.domHeight = rect.bottom - rect.top;
            }
    
            shoot(text) {
                let div = document.createElement('div');
                div.style.position = 'absolute';
                div.style.left = this.domWidth + 'px';
                div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + 'px';
                div.style.whiteSpace = 'nowrap';
                div.style.color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
                div.innerText = text;
                this.dom.appendChild(div);
    
                let roll = (timer) => {
                    let now = +new Date();
                    roll.last = roll.last || now;
                    roll.timer = roll.timer || timer;
                    let left = div.offsetLeft;
                    let rect = div.getBoundingClientRect();
                    if (left < (rect.left - rect.right)) {
                        this.dom.removeChild(div);
                    } else {
                        if (now - roll.last >= roll.timer) {
                            roll.last = now;
                            left -= 3;
                            div.style.left = left + 'px';
                        }
                        requestAnimationFrame(roll);
                    }
                }
                roll(50 * +Math.random().toFixed(2));
            }
    
        }
    
        let barage = new Barrage('content');
    
        function appendList(text) {
            let p = document.createElement('p');
            p.innerText = text;
            document.querySelector('#content-text').appendChild(p);
        }
    
        document.querySelector('#send').onclick = () => {
            let text = document.querySelector('#text').value;
            barage.shoot(text);
    
            appendList(text);
        };
    
        const textList = ['弹幕', '666', '233333333', 'javascript', 'html', 'css', '前端框架', 'Vue', 'React', 'Angular',
            '测试弹幕效果'
        ];
        textList.forEach((s) => {
            barage.shoot(s);
            appendList(s);
        })
    })()

# 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o2OTE4Mzc4Nw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o2OTE4Mzc4Nw_size_16_color_FFFFFF_t_70]: /images/20210527/6612d4b562fd43b5aec97819aabad6ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o2OTE4Mzc4Nw_size_16_color_FFFFFF_t_70 1]: /images/20210527/e8b4ff9102224aa78c96175f6dc003f6.png