廢話不多,複製下面的程式碼到自己建立的index。html檔案,網頁開啟就能看見了
[簡單的彈幕,只為參考學習。實際需求根據專案要求開發]
圖片效果
程式碼
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 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)