©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>实现原理
* 实现方式一(简单)
运行图
使用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); })();
<>以上就是实现的源代码
<>下篇博客我将介绍另外的实现方法，可以实现鼠标悬停改变样式，点赞，举报