废话不多，复制下面的代码到自己创建的index.html文件，网页打开就能看见了
[简单的弹幕，只为参考学习。实际需求根据项目要求开发]
图片效果
代码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<html>
<title></title>
<body>
<canvas id='canvas'></canvas>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
c.width=800;
c.height=400;
var fonts=new Array();
var font=new Array();
font['font']='20px Georgia';
font['fillStyle']='#FF0000';
font['text']='test11111';
font['x']=-parseInt(ctx.measureText(font['text']).width);
font['y']=40;
fonts.push(font);
var font=new Array();
font['font']='12px Georgia';
font['fillStyle']='orange';
font['text']='<=888888888=>';
font['x']=-parseInt(ctx.measureText(font['text']).width);
font['y']=120;
fonts.push(font);
var font=new Array();
font['font']='30px Georgia';
font['fillStyle']='green';
font['text']='哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈';
font['x']=-parseInt(ctx.measureText(font['text']).width);
font['y']=300;
fonts.push(font);
var font=new Array();
font['font']='10px Georgia';
font['fillStyle']='#602eba';
font['text']='\(^o^)/~';
font['x']=-parseInt(ctx.measureText(font['text']).width);
font['y']=200;
fonts.push(font);
var font=new Array();
font['font']='15px Georgia';
font['fillStyle']='#FF0000';
font['text']='test222';
font['x']=-parseInt(ctx.measureText(font['text']).width);
font['y']=60;
fonts.push(font);
var times=0;
window.setInterval(function(){
c.width=800;
c.height=400;
for(var i=0;i<fonts.length;i++){
var x=fonts[i]['x']+times;
if(x<800){
ctx.font=fonts[i]['font'];
ctx.fillStyle=fonts[i]['fillStyle'];
var txt=fonts[i]['text'];
ctx.fillText(txt,x,fonts[i]['y']);
}else{
fonts.splice(i,1);
}
}
times+=1;
},10)
</script>