微客导航 » 文章资讯 » js cavans实现静态滚动弹幕

js cavans实现静态滚动弹幕

2023-07-24 09:56:04 150

本文实例为大家分享了js实现静态滚动弹幕的具体代码，供大家参考，具体内容如下





Document

$(function(){ //弹幕 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.height=''; //存储实例 varstore={}; //字号大小 varfontSize=12; //实例方法 varBarrage=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.ycanvas.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.ycanvas.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(); }; varcanvas='' $('.video-x').html(canvas); canvasBarrage("#canvasBarrage",dataBarrage); })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js cavans实现静态滚动弹幕

热门推荐

随机推荐