用H5的canvas做出彈幕效果

這次帶給大家用H5的canvas做出彈幕效果，用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、計算當文本超出畫布時移出彈幕列表

代碼

//html<div>
    <video>
        <source></source>
        <source></source> 
        Your browser does not support the video tag.
    </video>
    <canvas>
        您的浏览器不支持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  {
        barrage.shoot(t);
    })
})();

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

前端開發中的SVG動畫

#canvas怎麼做出黑色背景帶特效碎屑煙火

#

以上是用H5的canvas做出彈幕效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！