基于原生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];//获取弹幕显示区域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 <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);
	})();

---

以上就是实现的源代码

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