基于原生js和css3实现barrage弹幕效果

实现原理

实现方式一(简单)

运行图

使用cancas画板实现。循环刷新和绘制画板像素，每一次循环更改绘制元素的x坐标

核心函数：

clearRect(x,y,width,height) 在给定的矩形内清除指定的像素

fillText(content,x,y) 将content内容绘制到指定的(x,y)处

源码展示:

var canvas = document.getElementById("canvas-1");//获取cancas标签dom元素
var vas = canvas.getContext("2d");//获取画板操作对象
var barrage_content = document.getElementsByClassName("barrage-content")[0];//获取弹幕显示区域domvar width = barrage_content.clientWidth;//获取展示区域width
var height = barrage_content.clientHeight;//获取展示区域heightvar positionTop = barrage_content.clientTop;//获取展示区域top
var postionLeft = barrage_content.clientLeft;//获取展示区域leftvar rect = barrage_content.getBoundingClientRect();//获取展示区域矩形范围区var numX = [100, 150, 260,270,300,310,315,415,400,250];//初始X位置池
var numY = [100, 300, 400,320,60,55,389,260,235,210];//初始Y位置池var rangeValue = 20;//测试用弹幕数据
var barrageData_2 = [
{"content":"第一条弹幕.............","color":"red","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"第三条弹幕.............","color":"green","speed":6,"textSize":20,"positionX":0,"positionY":0
},
{"content":"第二条弹幕.............","color":"red","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"第四条弹幕.............","color":"blue","speed":8,"textSize":20,"positionX":0,"positionY":0
},
{"content":"第五条弹幕.............","color":"black","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"--------随机弹幕-------------.","color":"green","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"--------随机弹幕-------------.","color":"green","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"--------随机弹幕-------------.","color":"green","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"--------随机弹幕-------------.","color":"green","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"--------随机弹幕-------------.","color":"green","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"--------随机弹幕-------------.","color":"green","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"--------随机弹幕-------------.","color":"green","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"--------随机弹幕-------------.","color":"green","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"--------随机弹幕-------------.","color":"green","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"--------随机弹幕-------------.","color":"green","speed":2,"textSize":20,"positionX":0,"positionY":0
},
{"content":"--------随机弹幕-------------.","color":"green","speed":2,"textSize":20,"positionX":0,"positionY":0
}
];(function () {var color = ["red","blue","green"];//随机颜色池console.log("barrage_clientWidth", width, "barrage_clientHeight", height);canvas.width = width;//设置画板widthcanvas.height = height;//设置画板heightvas.rect(rect.left, rect.top, rect.width, rect.height);//创建画板矩形区// vas.font = "20px Arial"for (var i = 0; i <barrageData_2.length;i++){//初始弹幕的X，Y坐标barrageData_2[i]["positionX"] = numX[Math.floor(Math.random() * 10)];barrageData_2[i]["positionY"] = numY[Math.floor(Math.random() * 10)];}setInterval(function () {//定时刷新画板vas.clearRect(0, 0, rect.width, rect.height);for (var i = 0; i < barrageData_2.length; i++) {//对每条弹幕的位置进行刷新barrageData_2[i]["positionX"] = barrageData_2[i]["positionX"] - barrageData_2[i]["speed"] * 0.6;vas.fillStyle = barrageData_2[i]["color"];vas.font = barrageData_2[i]["textSize"] + "px Arial";vas.fillText(barrageData_2[i]["content"], barrageData_2[i]["positionX"], barrageData_2[i]["positionY"]);}// console.log("textWidth: ", vas.measureText(barrageData_2[0]["content"]).valueOf());for (var i = 0;  i < barrageData_2.length; i++){if (barrageData_2[i]["positionX"] < -100) {barrageData_2[i]["positionX"] = rect.width;}}}, 30);// console.log("slider-handle: ", sliderHandle);// vas.fillText("================================清除测试文字===================================", 0, 200);// vas.clearRect(rect.left, rect.top, rect.width, rect.height);})();

以上就是实现的源代码

下篇博客我将介绍另外的实现方法，可以实现鼠标悬停改变样式，点赞，举报

基于原生js和css3实现barrage弹幕效果相关推荐

基于原生js的图片延迟加载
当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...
基于原生JS项目使用Vue3 + Surely Vue Table组件
Js & Surely Vue Table 本文主要说明,基于原生JS项目如何使用Surely Vue Table组件. Surely Vue Surely Vue Table 是 Ant D ...
原生html中modal,基于原生JS封装的Modal对话框插件
基于原生JS封装Modal对话框插件原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ...
基于原生js雷霆战机
本篇文章是基于原生js使用函数制作游戏预览 html部分 <!DOCTYPE html> <html lang="en"><head>< ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
原生js实现文字循环向上滚动效果
原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...
php侧边栏导航效果,原生js实现电商侧边导航效果
知识要点实现原理: 1.点击楼层跳相应楼层,用的是锚点定位电梯:2F 个护家清列表title: 这个没什么好说的 2.当点击楼层跳到相应楼层时,该楼层高亮显示我们的脚本主要就是实现这个功能. ...
基于原生js实现主流弹幕的所有功能
原生js实现弹幕效果原理二距离写实现原理一有很长一段时间了,因为好像没什么人看,所以我就不太想写原理二,为了不食言,我还是坚持做完这个系列吧下面介绍的就是目前主流直播弹幕网站的弹幕实现方式,包括 ...
原生js与css3结合的电风扇
最近学习了css3,就琢磨做些东西练练手. 下面是自己写的一个电风扇,使用了原生js中的定时器和css3的一些属性 <!doctype html> <html lang=" ...

基于原生js和css3实现barrage弹幕效果

实现原理

以上就是实现的源代码

下篇博客我将介绍另外的实现方法，可以实现鼠标悬停改变样式，点赞，举报

基于原生js和css3实现barrage弹幕效果相关推荐

最新文章

热门文章