重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
购买高级弹幕只能在买的这个视频使用,使用时还要经过UP主的确认才能生效
创新互联建站网站建设公司是一家服务多年做网站建设策划设计制作的公司,为广大用户提供了成都网站设计、成都网站建设,成都网站设计,广告投放平台,成都做网站选创新互联建站,贴合企业需求,高性价比,满足客户不同层次的需求一站式服务欢迎致电。
你可以试试将你的代码改成这样试试
!DOCTYPE HTML
html
head
meta charset="utf-8"/
titlePHP中文网--HTML5文字弹幕效果代码/title
style type="text/css"
*{
margin:0;
padding:0;
list-style: none;
border:0;
}
body{
background: #bcbcbc;
}
.main{
width: 600px;
height: 400px;
margin:0 auto;
position: relative;
}
.main img{
position: absolute;
right: 0;
bottom:0;
width: 100px;
height: 100px;
}
#canvas{
display: block;
background: #000;
}
/style
/head
body
div class="main"
canvas id="canvas"嗨帅哥您的浏览器不支持canvas赶紧去升级吧/canvas
/div
script type="text/javascript"
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext("2d");
var width=600;
var height=400;
var colorArr=["yellow","pink","orange","red","green"];
var textArr=[
"PHP中文网不错我经常去!",
"我用双手成就你的梦想",
"犯我德邦者,虽远必诛!",
"PHP中文网在线网络课程报名啦!!!",
"PHP中文网在线网络课程报名啦!!!",
"PHP中文网在线网络课程报名啦!!!",
"PHP中文网在线网络课程报名啦!!!",
"PHP中文网在线网络课程报名啦!!!",
"陷阵之志,有死无生",
"即使敌众我寡,末将亦能万军从中取敌将首级!"
]
canvas.width=width;
canvas.height=height;
var image=new Image();
ctx.font = "20px Courier New";
var numArrL=[80,100,5,300,500,430];//初始的X
var numArrT=[80,100,20,300,380,210];//初始的Y
setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
for(var j=0;jtextArr.length;j++){
numArrL[j]-=(j+1)*0.6;
ctx.fillStyle = colorArr[j]
ctx.fillText(textArr[j],numArrL[j],numArrT[j]);
}
for(var i=0;itextArr.length;i++){
if(numArrL[i]=-500){
numArrL[i]=canvas.width;
}
}
ctx.restore();
},30)
/script
/body
/html
一般来说flash的性能不好,所以会有些卡顿现象,谷歌已经不支持flash了,h5性能会更好一些,另外你仔细看看,我记得有弹幕的设置的,可以调弹幕的显示形式的。你这好像默认的是靠上显示。
可以用canvas实现的,意思就是当用户输入的信息通过显示在某一个容器上,这个容器就是定位在播放页面的上层的,而且可以设置弹幕速度和随机位置等,你可以去17素材网搜搜,有这样的例子的