小二,上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li {
margin: 0;
padding: 0;
}
#canvas {
position: absolute;
left: 0;
top: 0;
display: block;
margin: 0 auto;
border:1px solid #333;
}
#container{
width: 780px;
padding:10px;
margin: 20px auto 0 auto;
border:1px solid #333;
}
#video-wrapper{
position: relative;
margin: 0 auto;
width: 640px;
height: 360px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="video-wrapper">
<canvas id="canvas"></canvas>
<video controls src="video/video.mp4" width="640" height="360"></video>
</div>
</div>
<div id="container">
<input type="text" id="message">
<select id="speed">
<option value="1">极慢</option>
<option value="2">慢</option>
<option value="3" selected>正常</option>
<option value="6">超快</option>
</select>
<select id="color">
<option value="#000">黑色</option>
<option value="#f00">红色</option>
<option value="#0f0">绿色</option>
<option value="#00f">蓝色</option>
</select>
<select id="size">
<option value="10">超小</option>
<option value="12">小的</option>
<option value="16" selected>正常</option>
<option value="20">超大</option>
</select>
<button onclick="add()">发送</button>
</div>
<script>
function add(){
let messageEle = document.getElementById('message');
let speedEle = document.getElementById('speed');
let colorEle = document.getElementById('color');
let sizeEle = document.getElementById('size');
barrages.push({
text:messageEle.value,
color:colorEle.value,
size:sizeEle.value,
speed:speedEle.value,
x:canvasEle.width,
y:Math.ceil(Math.random() * canvasEle.height)
});
}
let canvasEle = document.getElementById('canvas');
canvasEle.width = 640;
canvasEle.height = 360;
let ctx = canvasEle.getContext('2d');
let colors = ['#f00','#0f0','#00f','#000'];
let messages = ['这个演员没眼缘','太不喜欢他了','这个演员不好看','演得还可以','太假了','守护全世界最好的美好'];
let barrages = [];
messages.forEach(item=>{
barrages.push({
text:item,
color:colors[Math.floor(Math.random() * colors.length)],
size:Math.ceil(Math.random() * 15) + 10,
speed:Math.ceil(Math.random() * 3) + 1,
x:Math.ceil(Math.random() * canvasEle.width),
y:Math.ceil(Math.random() * canvasEle.height)
})
});
function draw(){
ctx.clearRect(0,0,canvasEle.width,canvasEle.height) ;
barrages.forEach(item=>{
ctx.font = item.size + 'px Microsoft Yahei';
ctx.fillStyle = item.color;
item.x -= item.speed;
if(item.x <= -(ctx.measureText(item.text).width) ){
item.x = canvasEle.width;
}
ctx.fillText(item.text,item.x,item.y);
});
window.requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>