这篇文章主要讲解了“HTML中用Canvas怎样制作循环滚动播放弹幕的效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML中用Canvas怎样制作循环滚动播放弹幕的效果”吧！

本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕，分享给大家，具体如下：

使用方法和API

语法如下：

canvasBarrage(canvas, data);

其中：

canvas

canvas 表示我们的 <canvas> 画布元素，可以直接是DOM元素，也可以是 <canvas> 画布元素的选择器。

data

data 表示弹幕数据，是一个数组。例如下面：

[{
    value: '弹幕1',
    color: 'blue',
    range: [0, 0.5]
}, {
    value: '弹幕2',
    color: 'red',
    range: [0.5, 1]
}]

可以看到数组中的每一个值表示一个弹幕的信息对象。其中 value 表示弹幕的文字内容； color 表示弹幕描边的颜色（弹幕文字本身默认是白色）； range 表示弹幕在画布中的区域范围，例如 [0, 0.5] 表示弹幕在画布中的上半区域显示， [0.5, 1] 表示弹幕在画布中的下半区域显示。

然后就可以看到无限滚动的弹幕效果了。

补充说明：

• 此弹幕效果默认文字大小是 28px ，并且文字加粗，如果这个效果不符合您的需求，需要在 canvasBarrage() 方法中修改源代码。因为本来就是个简单静态效果，因此没有专门设计成API。
• 此弹幕效果默认是白色文字加可变颜色描边，同样的，如果这个效果不符合您的需求，需要在 canvasBarrage() 方法中修改源代码。
• 跟真实的弹幕效果有所不同，这里的弹幕出现的速度和时机不是基于特定时间，而是随机产生。所以看到有些文字好像开飞机，而有些文字好像坐着拖拉机。因为是死数据，这样设计会看上去更真实写。

源代码：

<style>
    .video-x {
        position: relative;
        width: 640px;
        margin: auto;
    }

    .canvas-barrage {
        position: absolute;
        width: 640px;
        height: 360px;
    }
    .video-placeholder {
        height: 360px;
        background-color: #000;
        animation: bgColor 10s infinite alternate;
    }
    @keyframes bgColor {
        25% {
            background-color: darkred;
        }
        50% {
            background-color: darkgreen;
        }
        75% {
            background-color: darkblue;
        }
        100% {
            background-color: sliver;
        }
    }
    </style>
    
    <div class="video-x">
        <canvas id="canvasBarrage" class="canvas-barrage"></canvas>
        <div class="video-placeholder"></div>
    </div>
    
    <script>
        // 弹幕数据
        var dataBarrage = [{
            value: '使用的是静态死数据',
            color: 'blue',
            range: [0, 0.5]
        }, {
            value: '随机循环播放',
            color: 'blue',
            range: [0, 0.6]
        }, {
            value: '可以控制区域和垂直分布范围',
            color: 'blue',
            range: [0, 0.5]
        }, {
            value: '字体大小和速度在方法内设置',
            color: 'black',
            range: [0.1, 1]
        }, {
            value: '适合用在一些静态页面上',
            color: 'black',
            range: [0.2, 1]
        }, {
            value: '基于canvas实现',
            color: 'black',
            range: [0.2, 0.9]
        }, {
            value: '因此IE9+浏览器才支持',
            color: 'black',
            range: [0.2, 1]
        }, {
            value: '可以设置边框颜色',
            color: 'black',
            range: [0.2, 1]
        }, {
            value: '文字颜色默认都是白色',
            color: 'black',
            range: [0.2, 0.9]
        }, {
            value: '若文字颜色不想白色',
            color: 'black',
            range: [0.2, 1]
        }, {
            value: '需要自己调整下JS',
            color: 'black',
            range: [0.6, 0.7]
        }, {
            value: '如果需要的是真实和视频交互的弹幕',
            color: 'black',
            range: [0.2, 1]
        }, {
            value: '可以回到原文',
            color: 'black',
            range: [0, 0.9]
        }, {
            value: '查看另外一个demo',
            color: 'black',
            range: [0.7, 1]
        }, {
            value: '下面就是占位弹幕了',
            color: 'black',
            range: [0.7, 0.95]
        }, {
            value: '前方高能预警！！！',
            color: 'orange',
            range: [0.5, 0.8]
        }, {
            value: '前方高能预警！！！',
            color: 'orange',
            range: [0.5, 0.9]
        }, {
            value: '前方高能预警！！！',
            color: 'orange',
            range: [0, 1]
        }, {
            value: '前方高能预警！！！',
            color: 'orange',
            range: [0, 1]
        }];

        // 弹幕方法
        var canvasBarrage = function (canvas, data) {
            if (!canvas || !data || !data.length) {
                return;
            }
            if (typeof canvas == 'string') {
                canvas = document.querySelector(canvas);
                canvasBarrage(canvas, data);
                return;
            }
            var context = canvas.getContext('2d');
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;

            // 存储实例
            var store = {};

            // 字号大小
            var fontSize = 28;

            // 实例方法
            var Barrage = function (obj, index) {
                // 随机x坐标也就是横坐标，对于y纵坐标，以及变化量moveX
                this.x = (1 + index * 0.1 / Math.random()) * canvas.width;
                this.y = obj.range[0] * canvas.height + (obj.range[1] - obj.range[0]) * canvas.height * Math.random() + 36;
                if (this.y < fontSize) {
                    this.y = fontSize;
                } else if (this.y > canvas.height - fontSize) {
                    this.y = canvas.height - fontSize;
                }
                this.moveX = 1 + Math.random() * 3;

                this.opacity = 0.8 + 0.2 * Math.random();
                this.params = obj;

                this.draw = function () {
                    var params = this.params;
                    // 根据此时x位置绘制文本
                    context.strokeStyle = params.color;
                    context.font = 'bold ' + fontSize + 'px "microsoft yahei", sans-serif';
                    context.fillStyle = 'rgba(255,255,255,' + this.opacity + ')';
                    context.fillText(params.value, this.x, this.y);
                    context.strokeText(params.value, this.x, this.y);
                };
            };

            data.forEach(function (obj, index) {
                store[index] = new Barrage(obj, index);
            });

            // 绘制弹幕文本
            var draw = function () {
                for (var index in store) {
                    var barrage = store[index];
                    // 位置变化
                    barrage.x -= barrage.moveX;
                    if (barrage.x < -1 * canvas.width * 1.5) {
                        // 移动到画布外部时候从左侧开始继续位移
                        barrage.x = (1 + index * 0.1 / Math.random()) * canvas.width;
                        barrage.y = (barrage.params.range[0] + (barrage.params.range[1] - barrage.params.range[0]) * Math.random()) * canvas.height;
                        if (barrage.y < fontSize) {
                            barrage.y = fontSize;
                        } else if (barrage.y > canvas.height - fontSize) {
                            barrage.y = canvas.height - fontSize;
                        }
                        barrage.moveX = 1 + Math.random() * 3;
                    }
                    // 根据新位置绘制圆圈圈
                    store[index].draw();
                }
            };

            // 画布渲染
            var render = function () {
                // 清除画布
                context.clearRect(0, 0, canvas.width, canvas.height);

                // 绘制画布上所有的圆圈圈
                draw();

                // 继续渲染
                requestAnimationFrame(render);
            };

            render();
        };

        canvasBarrage('#canvasBarrage', dataBarrage);
    </script>

以上就是关于“HTML中用Canvas怎样制作循环滚动播放弹幕的效果”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 怎样用css控制元素做弧线运动？

  怎样用css控制元素做弧线运动？其实要实现元素做弧线运动的效果并不困难，本文有详细的实现思路及实现过程，感兴趣的朋友可以参考看看，接下来我们一起来学习一下吧。

• 浅谈CSS隐藏元素的方法及使用，你知道几个？

  在CSS中隐藏网页页面元素的方法有很多，例如display、visibility、opacity这三个属性，应该是大家首先想到的，其实除了设置这些熟悉，我们还有其他方法也能够实现CSS隐藏元素，下面我们就一起来看看css隐藏元素的方法。

• CSS容器颜色渐变效果有几种实现方法，代码是什么

  CSS容器背景颜色渐变怎样实现呢？一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

• CSS字符串补全有几种方法，优缺点是什么

  很多时候都会碰到字符串补全的需求，典型的例子就时间或者日期中的补零操作，例如2021-12-312022-03-03通常的做法是if (num < 10) { num = '0' + num}后来，JS 中出现了

• CSS3怎样给背景加遮罩层，有几种实现方式

  前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法，感兴趣的朋友跟随小编一起看看吧