基於原生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);
	})();

---

以上就是實現的源代碼

下篇博客我將介紹另外的實現方法，可以實現鼠標懸停改變樣式，點贊，舉報