废话不多,复制下面的代码到自己创建的index.html文件,网页打开就能看见了
[简单的弹幕,只为参考学习。实际需求根据项目要求开发]
图片效果
代码
<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']='';
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 |