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

实现原理

• 实现方式一(简单)

运行图

barrage1

---

使用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];//获取弹幕显示区域dom

var width = barrage_content.clientWidth;//获取展示区域width
var height = barrage_content.clientHeight;//获取展示区域height

var positionTop = barrage_content.clientTop;//获取展示区域top
var postionLeft = barrage_content.clientLeft;//获取展示区域left

var 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;//设置画板width
    canvas.height = height;//设置画板height

    vas.rect(rect.left, rect.top, rect.width, rect.height);//创建画板矩形区
    // vas.font = "20px Arial"
    for (var i = 0; i 

---

以上就是实现的源代码

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