弹幕视频设计网站12------绘制弹幕02

简介: 弹幕视频设计网站12------绘制弹幕02


1、设计一个初始化轨道,然后弹幕能够在这些轨道中进行初始化滚动,轨道是通过初始行进行滚动的

2、接下来我们给弹幕进行一个封装

3、把类封装到一个地方:

4、我们把弹幕的数据,封装到initTest里面

5、这里的参数,是要传给前端的参数

6、初始化弹幕数据对象

7、第一个是弹幕值

8、如果还在highwayAmount,就说明这个列表里面没有被占用,如果highwayAmount不是空的话,还有轨道可以发送

9、把0下标的值传给top,这里的left是用来设置弹幕所在的位置

10、上一秒是这样的,下一秒让left减掉这个数值

11、让他进行左边的一个位移,把左边给删掉

12、他的宽度就是0的基础上,加上这个canvas的宽度

13、定义起点和颜色

14、这里定义一下弹幕的速度

15、

16、用这个方法

17、是否是占用状态

18、当我们调用方法的时候,我们就可以让我们属性值,在我们屏幕中进行显示

19、当我们创建好Barrage这个类的时候

20、把我们的颜色和文字储存到弹幕里面

21、写一个方法,这个方法可以在video中进行调用

22、这里点击发送,弹幕会出现在网站上

23、这里有一个完成绘画标志,这里的false的意思是当我们还没有使用视频的弹幕的时候

24、在没有开始的时候,我们先存储到待发送的弹幕当中

25、如果是ture,我们就可以有没有轨道可以通过

26、利用addTest来插入我们讲述的弹幕

27、判断一下前后轨道,是否前后轨道被占用

28、删掉轨道给top

29、当他不占用的时候,又还给

30、这里的弹幕就可以初始化信息了

31、把他插入一个等待发送的弹幕

32、如果不是绘画的状态

33、既然我们已经希望把弹幕列表放进去,我们就可以把我们弹幕列表中拿出我们的数据,在画板上进行一个绘画和绘制,来实现我们想要达到的效果:已经进入绘画状态了,现在

34、调动runBarrag,

35、把我们第0个轨道数,弹幕全部拿出来

36、这个val就是我们拿来的每个值

37、把我们发送的对象

38、可以进入绘画状态的弹幕之后,我们就可以进行绘制了,首先绘制

39、每次都要进行一个位移,之前的弹幕,我们就可以给他删除掉

40、

41、三个状态

42、先获取左边的值

43、再获取他的宽度

44、如果i没有满足条件,就先把i剔除掉

45、继续绘制我们的弹幕

46、设置弹幕颜色和位置

相关文章
|
3天前
|
数据库
视频弹幕设计网站10-----弹幕列表信息获取
视频弹幕设计网站10-----弹幕列表信息获取
视频弹幕设计网站10-----弹幕列表信息获取
|
3天前
|
前端开发 JavaScript
弹幕视频设计网站13---------绘制弹幕03
弹幕视频设计网站13---------绘制弹幕03
|
3天前
|
存储 前端开发 JavaScript
视频弹幕设计网站11-----绘制弹幕
视频弹幕设计网站11-----绘制弹幕
|
3天前
|
JavaScript Java 关系型数据库
视频弹幕网站设计01-我爱发弹幕
视频弹幕网站设计01-我爱发弹幕
|
3天前
|
XML SQL 前端开发
视频弹幕设计网站09-----发送弹幕到数据库
视频弹幕设计网站09-----发送弹幕到数据库
视频弹幕设计网站09-----发送弹幕到数据库
弹幕视频设计网站16------------弹幕暂停与调节进度条
弹幕视频设计网站16------------弹幕暂停与调节进度条
|
3天前
|
JavaScript 数据库
视频弹幕设计网站08-------video样式
视频弹幕设计网站08-------video样式
|
3天前
|
前端开发 JavaScript
视频弹幕设计网站07-----------创建video
视频弹幕设计网站07-----------创建video
|
3天前
|
数据库
弹幕视频设计网站15--------------修复弹幕出现多次
弹幕视频设计网站15--------------修复弹幕出现多次
|
3天前
|
XML SQL 前端开发
视频弹幕设计网站05-------静态资源与接口
视频弹幕设计网站05-------静态资源与接口