HTML5 canvas实现的静态循环滚动播放弹幕
导读:收集整理的这篇文章主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕,觉得挺不错的,现在分享给大家,也给大家做个参考。 本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕,分享给大家,具体如下:使用方法和A...
收集整理的这篇文章主要介绍了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静态循环弹幕内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML5 canvas实现的静态循环滚动播放弹幕
本文地址: https://pptw.com/jishu/586294.html