弹幕文字整理

最新推荐文章于 2023-12-20 16:30:28 发布

qq_41629162

最新推荐文章于 2023-12-20 16:30:28 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41629162/article/details/92788869

该博客介绍了使用websocket和canvas实现相关功能，给出了前端和后端代码示例。后端使用express框架，监听特定端口。不过存在一个问题，即连续发的弹幕不能同时存在，目前尚未找到问题原因。

用到的方法：
websocket、canvas

前端代码：
<!doctype html>

websocket

<body>
	<div style="position:relative;width:500px;height:400px;text-align:center;">
	   <img src="Z.jpg" id="im" width="600" height="500">
	   <canvas id="canva" width="600" height="500" style="position:absolute;top:0;left:0;">
		您的浏览器不支持canvas标签。
	   </canvas><br>
	   <input id="sendText" type="text">
	<button id="sendBtn">发送</button>
	</div>
	
</body>
<script type="text/javascript">
	var ws = new WebSocket('ws://192.168.1.107:3000/ws');
		ws.onmessage=function(e){
			var mes=e.data;


		    showMessage(mes);
	        };
	    ws.onerror=function(err){
		
		console.log(err);
	        };
	    ws.onopen=function(){
		     document.getElementById("sendBtn").onclick=function(){
		     var txt=document.getElementById("sendText").value;
		     if(txt){
			    ws.send(txt);
		         }
	           }
	        };
	    ws.onclose=function(){
		console.log('_close');
	        };


	function showMessage(str){
		var canvas=document.getElementById("canva");
		var img=document.getElementById("im");
		ctx = canvas.getContext("2d");
             
		function Barrage(canvas, ctx, data) {
			this.width = canvas.width
			this.height = canvas.height
			
			this.color = '#'+Math.floor(Math.random()*16777215).toString(16)
			
			this.value=data
			this.x = this.width //x坐标
			this.y = Math.random() * this.height
			this.speed = Math.random() + 1
			this.fontSize = Math.random() * 90 + 12
            textobj.push(this);
	     }
		Barrage.prototype.draw = function(){
				if(this.x < -200) {
					return
				 } else {
					ctx.font = this.fontSize + 'px "microsoft yahei", sans-serif';
					ctx.fillStyle = this.color
					this.x = this.x - this.speed
					ctx.fillText(this.value, this.x, this.y)
				 }
			  }
		  
		canvas.onmousemove=function(event){
			new Barrage()
		}	  
		
		var textobj = [];
		var wordObj = [];
		wordObj.push(str)  
		wordObj.forEach(function (item, index) {
            var newWord = new Barrage(canvas, ctx, item); //构建新的弹幕实例
        })     
		 
		setInterval(function(){
								//ctx.clearRect(0,0,canvas.width,canvas.height)
								//ctx.drawImage(img, 0, 0,canvas.width, canvas.height)
		ctx.clearRect(0,0,canvas.width,canvas.height);	
		   for(var i=0;i<textobj.length;i++){
			textobj[i].draw();
		     }							
			
	    },0)
		//var wordObj=wordObj.push(newWord)
    }	
</script>

后端代码：

var express = require(‘express’);
var app = express();
var expressWs = require(‘express-ws’)(app);
var util = require(‘util’);
app.use(express.static(’./img’));
app.ws(’/ws’, function(ws, req) {
util.inspect(ws);
ws.on(‘message’, function(msg) {
var aWss = expressWs.getWss(’/ws’);

  aWss.clients.forEach(function (client) {
    client.send(msg);
  });

});

})

app.listen(3000,“192.168.1.107”);

存在的问题是不能做到连续发的弹幕不能同时存在，不知道原因