用到的方法:
websocket、canvas
前端代码:
<!doctype html>
<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”);
存在的问题是不能做到连续发的弹幕不能同时存在,不知道原因