效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas实现弹幕效果(jquery)</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
    </style>
</head>
<body>
<div style="position:relative;width:500px;height:400px;text-align:center;">
    <video controls="controls" autoplay="autoplay" style="width:100%;height:100%;">
        <source src="http://jq22.qiniudn.com/jq22.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>

<script>
    (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', '测试弹幕效果', '弹幕', '666', '233333333',
            'javascript', 'html', 'css', '前端框架', 'Vue', 'React',
            'Angular', '测试弹幕效果', '弹幕', '666', '233333333',
            'javascript', 'html', 'css', '前端框架', 'Vue', 'React',
            'Angular', '测试弹幕效果'
        ];

        textList.forEach((t) => {
            barrage.shoot(t);
        })

    })();
</script>


<pre style="color:red">
 感：  最近贡献一下我在教学中的小案例可以能给你一些帮助 ,希望继续关注我的博客

                                                                               --王
</pre>


</body>
</html>
canvas实现弹幕效果(jquery)

效果展示：

源码展示：

猜你喜欢
