HTML5 canvas视频弹幕

最新推荐文章于 2021-06-03 23:40:31 发布

陈小玲玲

最新推荐文章于 2021-06-03 23:40:31 发布

阅读量320

点赞数 1

本文链接：https://blog.csdn.net/qq_43506776/article/details/108984373

版权

1.新建HTML界面

<style>
    *{
      padding: 0;
      margin:0;
    }
    .container{
      width: 500px;
      height: 450px;
      position: relative;
      margin: 0 auto;
    }
    #cvs,#vdo{
      position: absolute;
      top: 0;
      left: 0
    }
    #cvs{
      z-index: 1;
      background-color: rgba(255, 119, 255, 0.589);
    }
    #vdo{
      height: 450px;
      width: 500px;
    }
    .wrap{
      width: 500px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      box-shadow: 0 2px 10px 2px #ccc;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <canvas id="cvs" height="380" width="500"></canvas>
    <video id="vdo" src="video.mp4" controls ></video>
    <!-- 和原始视频一样就可以了 -->
  </div>

  <!-- 获取输入的弹幕内容 -->
  <div class="wrap">
    <div class="userDiv">
      <!-- 输入弹幕内容 -->
      <input type="text" id="inputMsg" placeholder="输入弹幕"> 
      <!-- 输入弹幕颜色 -->
      <input type="color" name="" id="inputColor">
      <!-- 发送按钮 -->
      <input type="button" id="inputButton" value="发送">
    </div>
  </div>
  <!-- 准备两个js文件(main.js 用来调用函数/msg.js  用来定义函数) -->

html样式如下

在这里插入图片描述
然后设置两个js文件一个叫main.js用来构造函数一个叫msg.js用来调用函数

msg.js:

<script>
	//我们暂时需要的值有 ：弹幕的x/y坐标，弹幕的内容，弹幕的速度，弹幕的字体大小，弹幕的字体颜色，弹幕的状态（false是未执行 ，true时正在执行）
	//构造一个函数，保存我们所需要的值
	var MsgObj = function(){
	  this.x = [];//保存弹幕x坐标
	  this.y = [];
	  this.msg = [];//保存弹幕的内容
	  this.spreed =[];//保存弹幕的速度
	  this.fontSize = [];//保存弹幕的字体大小
	  this.fontColor = [];//保存弹幕的字体颜色
	  this.alive=[]//保存弹幕的状态 true绘制  false消失
}
	//为构造函数添加一个number属性，来保存我们弹幕在canvas画布中的数量
	MsgObj.prototype.number = 100;
	//初始化我们的弹幕 init
	MsgObj.prototype.init = function(){
		//因为每个值都需要初始化，所以我们用循环遍历
		for(var i=0;i<this.number;i++){
			this.x[i] = canWidth//canWidth是我们在main.js中写的画布宽度，因为要从右边开始执行我们的弹幕
			this.y[i] = 10;//随便给值 这个地方只是给个初始值而已 后面还会变动
			this.msg[i] = "";
			this.spreed[i] = 3;
			this.fontSize[i] = "16px";
			this.fontColor[i]="#f0f";
			this.alive[i]=false;
		}
	}

	//然后我们开始绘制我们的弹幕
	MsgObj.prototype.draw = function(){
		//绘制的弹幕也是每条弹幕都需要重新绘制，所以我们在每条弹幕重绘之前先给它清屏
		ctx.clearRect(0,0,500,380);
		//绘制弹幕也是用for循环来
		for(var i=0;i<this.number;i++){
			//而我们只有当弹幕未执行时才开始绘制
			if(this.alive[i]==false){
				//绘制我们的弹幕颜色(其实也就是弹幕的颜色)
				ctx.fillStyle = this.fontColor[i];
				//绘制我们的弹幕大小
				ctx.font = this.fontSize[i]+" 宋体";
				//绘制我们的弹幕移动
				//因为弹幕在移动 移动的是x的值
				this.x[i] -=this.spreed[i]
				ctx.fillText(this.msg[i],this.x[i],this.y[i],this.)
				//什么时候开始弹幕的关闭呢？当然是当我们的弹幕到头的时候
				if(this.x[i]<0){
					this.alive[i] = false;
					this.x[i]=canWidth;
				}
			}
		}
	}
	//然后咱们开始获取咱们输入的弹幕内容
	//这里就要先开始看我们的main.js了
	//main.js文件写完了就算完全获取到我们的弹幕内容了，现在我们只需要完善代码 写出我们输出弹幕的函数
	MsgObj.prototype.add = function(){
		//用循环来输出我们每次的弹幕内容
		for(var i=0;i<this.number;i++){
			//当我们的弹幕消失了过后才开始输出新的弹幕
			if(this.alive[i] == false){
				//输出弹幕的位置 也就是修改y的坐标,为什么不输出x的位置呢？因为x是我们绘制时会改变的东西，y坐标是我们在内容输出之前就要写好了然后展示出来，这里相当于展示的意思
				this.y[i] = Math.random()*canHeight;
				//输出的弹幕速度
				this.spreed[i]= Math.random(3,4)
				//弹幕的大小
				this.fontSize[i] = Math.floor(Math.random(16,20))
				//修改我们的弹幕内容（根据我们获取到的内容进行输出）
				this.msg[i]= obj.msg || "来一发弹幕···"
				//修改弹幕的颜色
				this.fontColor[i] = obj.fontColor;
				//最后我们需要修改我们的弹幕状态
				this.alive[i] = true;
				//因为我们每次只返回一条弹幕，所以要用一个return
				return;
			}
		}
	}
</script>

main.js

<script>
	//我们的全局变量
	var cvs; //保存画布
	var canWidth; //保存画布的宽度
	var canHeight; //保存画布的高度
	var inputMsg; //保存用户输入的弹幕内容
	var inputColor; //保存用户输入的弹幕颜色
	var inputButton; //保存发送按钮
	var msg; //保存实例化对象

	//当然对于全局的变量我们也需要初始化init
	var init = function(){
		cvs = document.getElementById("cvs");
		//保存画布的宽度和高度
		canWidth = cvs.width;
		canHeight = cvs.height;
		//保存画笔对象
		ctx = cvs.getContext("2d")
		//获取用户输入的内容
		inputMsg = document.getElementById("inputMsg");
		inputColor = document.getElementById("inputColor")
		inputButton = document.getElementById("inputButton")

		//实例化 msg对象(这一步是下面的发送函数来的东西)
		msg = new MsgObj();
		//再初始化我们实例化的对象
		msg.init();
		
		//当我们点击button按钮的时候 触发发送函数
		inputButton.addEventListener("click",sendAdd)
		
	}

	//发送函数
	function sendAdd(){
		//我们要发送的就是输入的内容字体和颜色 我们把它放在对象中
		var obj = {
			msg:inputMsg.value;
			fontColor:inputColor.value;
		}
		//将我们获取到的对象传到msg.js中
		msg.add(obj);
		//这里我们没有msg对象，所以我们要在初始化里面去实例化我们的msg对象
	}

	//最后开始绘制我们的页面
	var sendloop = function(){
		//使用智能定时器
		requestAnimationFrame(sendloop)
		//这里开始调用我们msg.js文件中的绘制函数 draw
  		msg.draw()
	}
</script>