这篇文章将为大家详细讲解有关HTML5如何实现静态循环滚动播放弹幕，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

语法如下：

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:bgColor10sinfinitealternate;}@keyframesbgColor{25%{background-color:darkred;}50%{background-color:darkgreen;}75%{background-color:darkblue;}100%{background-color:sliver;}}</style><divclass="video-x"><canvasid="canvasBarrage"class="canvas-barrage"></canvas><divclass="video-placeholder"></div></div><script>//弹幕数据vardataBarrage=[{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]}];//弹幕方法varcanvasBarrage=function(canvas,data){if(!canvas||!data||!data.length){return;}if(typeofcanvas=='string'){canvas=document.querySelector(canvas);canvasBarrage(canvas,data);return;}varcontext=canvas.getContext('2d');canvas.width=canvas.clientWidth;canvas.height=canvas.clientHeight;//存储实例varstore={};//字号大小varfontSize=28;//实例方法varBarrage=function(obj,index){//随机x坐标也就是横坐标，对于y纵坐标，以及变化量moveXthis.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;}elseif(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(){varparams=this.params;//根据此时x位置绘制文本context.strokeStyle=params.color;context.font='bold'+fontSize+'px"microsoftyahei",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]=newBarrage(obj,index);});//绘制弹幕文本vardraw=function(){for(varindexinstore){varbarrage=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;}elseif(barrage.y>canvas.height-fontSize){barrage.y=canvas.height-fontSize;}barrage.moveX=1+Math.random()*3;}//根据新位置绘制圆圈圈store[index].draw();}};//画布渲染varrender=function(){//清除画布context.clearRect(0,0,canvas.width,canvas.height);//绘制画布上所有的圆圈圈draw();//继续渲染requestAnimationFrame(render);};render();};canvasBarrage('#canvasBarrage',dataBarrage);</script>

关于“HTML5如何实现静态循环滚动播放弹幕”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。