大家好,我是爱你三千遍斯塔克,之前我们讨论了一个绘制弹幕是怎样的,针对绘制弹幕我们进行了一个优化,不过还有一些不足的地方,这部分内容主要涉及,上面出现的弹幕闪屏,弹幕样式优化,进行了更进一步的讨论,这里有一些资料,可供大家参考,希望对大家有帮助。
希望你喜欢我的内容,记得关注我哦!我会继续为大家带来更好的作品!”
1、首先我们检查一下这个top状态
2、如果是非占用的状态
3、这里书写表示,要小于画布的宽度,这里表示说明,不占用空间
4、不占用了,这里我们就可以调用函数了
5、这里先改成false,如果这里不定义false,就会反复调用这个函数
6、为了避免两条弹幕之间连接太近
7、先定义一个500毫秒
8、检查检查待发送的弹幕是否还有其他值
9、让他位移,向左慢慢减二
10、如果不等于false,那我们就继续让他进行一个递归,变成false就说明不带绘画了
11、再重新调用一下自己
12、通过Barrage调用这个类
13、导入类
14、我们导入之后,是可以调用这个Barrage的方法:对Barrage进行一个初始化
15、init设置初始化,setCanvas设置画板
16、我们先获得setCanvas
17、页面相同的画板,设置canvas的画板
18、页面相同称为canvas
19、调用setCanvas获取相应的画板
20、把Vue的id写上
21、
22、初始化宽度为0
23、给他赋值,这两个属性就代表着属性的宽和高
24、轨道有数
25、把需要的资料都给他
26、init可以获得一个barrage的对象
27、为什么不能在这个函数中调用
28、为什么不能调用,因为canvas在这里是没有的
29、在这里我们也可以调用微弱的函数了
30、结果这里报错了,我们一点点找:先插入几个弹幕
31、第30行出现错误
32、这里i从1开始
33、一般文件从第一行开始
34、这里修改Text
35、这里设置弹幕颜色,修改一下就不报bug了
36、这里黑色弹幕就出现了
37、有个很大的黑色弹幕出现是因为没有控制好canvas,这里多设置一个样式的高度和宽度就行了
38、现在就可以发送了
39、这里出了一个错,前端的框架应该齐平,同时弹幕能该在一个位置
40、再发一个白色的弹幕,添加一个白色弹幕
41、结果这里弹幕一闪而过,立即消失了
42、为什么消失了,这里我们使用了一个递归
43、
44、这里我们可以在外面进行一个递归
45、这样就好了
46、样式改这里
47、现在这里能看到了
48、调成这样最合适