HTML5 canvas实现的静态循环滚动播放弹幕


Posted in HTML / CSS onJanuary 05, 2021

本文主要介绍了HTML5 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>

到此这篇关于HTML5 canvas实现的静态循环滚动播放弹幕的文章就介绍到这了,更多相关canvas静态循环弹幕内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 #HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 #HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 #HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 #HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 #HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 #HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 #HTML / CSS
You might like
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
node.js通过url读取文件
2020/10/16 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
python简单猜数游戏实例
2015/07/09 Python
python调用staf自动化框架的方法
2018/12/26 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
python 怎样进行内存管理
2020/11/10 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
党员自我评价2015
2015/03/03 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
Java 数据结构七大排序使用分析
2022/04/02 Java/Android