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]        }, {      cn是什么意思啊      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.querylector(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纵坐标，维他命b群营养丸以及变化量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;                } el 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-rif';                    context.fillstyle = 'rgba(255,255,255,' + this.opacity + ')';                    context.filltext(params.va高锰酸钾制氧lue, 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;                        } el 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静态循环弹幕内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！