js实现文字转gif动画代码
代码语言:html
所属分类:动画
代码描述:js实现文字转gif动画代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body {background: #333} </style> </head> <body > <center> <canvas style="visibility:hidden;position:absolute" width="421" height="150"></canvas> <textarea cols="50" rows="5"> Tutorial Blog for Stylish Blogger </textarea><br /> <input type="button" onclick="kaki()" value="Create GIF" /> <div id="tes"></div> <img></img><br /> </center> <script> //Original source: https://jsdo.it/jagarikin/UGE2 var canvas,ctx,nowbit,nowpin,ho,stp; canvas = document.getElementsByTagName('canvas')[0]; ctx = canvas.getContext('2d'); canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; ctx.fillRect(0,0,canvas.width,canvas.height); function kaki(){ var a,b,c; ctx.font="140px Beben Koben"; ho=[]; a=document.getElementsByTagName('textarea')[0].value; for(b=0;b<a.length;b++){ if(a.charCodeAt(b)==10)continue; ctx.fillStyle="rgb(0,0,0)"; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle="rgb(255,255,255)"; c=ctx.measureText(a[b]).width/2; ctx.fillText(a[b],canvas.width/2-c,canvas.height/2+50); ho.push(ctx.getImageData(0,0,canvas.width,canvas.height)); } stp=ho.length; a=a.split(/\r\n|\r|\n/); for(c=0;c<4;c++){ ctx.fillStyle="rgb(0,0,0)"; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle="rgb(255,255,255)"; d=40-c*5; ctx.font=d+"px Beben Koben"; for(b=0;b<a.length;b++){ e=ctx.measureText(a[b]).width/2; ctx.fillText(a[b],canvas.width/2-e,canvas.height/2+d-a.length/2*d+b*d); } ho.push(ctx.getImageData(0,0,canvas.width,canvas.height)); } cgif(); } function cgif(){ var a,b,c,d,e,im; im=ho[0]; nowbit=0; a=[]; b=[71,73,70,56,57,97]; for(c=0;c<6;c++)putbit(a,b[c],8); b=im.width; putbit(a,b>>0 & 0xFF,8); putbit(a,b>>8 & 0xFF,8); b=im.height; putbit(a,b>>0 & 0xFF,8); putbit(a,b>>8 & 0xFF,8); putbit(a,1,1); //Common Palais putbit(a,7,3); //Pixel 1 dot putbit(a,0,1); //sort putbit(a,7,3); //The value obtained by adding 1 as the n in the value (0-7), the number 2 n of the common palette putbit(a,0,8); //Background color putbit(a,0,8); //Aspect ratio? for(b=0;b<256;b++){ putbit(a,b,8); putbit(a,b,8); putbit(a,b,8); } //Application Extension putbit(a,33,8); putbit(a,255,8); putbit(a,11,8); b="NETSCAPE2.0"; for(c=0;c<11;c++)putbit(a,b.charCodeAt(c),8); putbit(a,3,8); putbit(a,1,8); b=0; //Number of times putbit(a,b>>0 & 0xFF,8); putbit(a,b>>8 & 0xFF,8); putbit(a,0,8); for(b=0;b<ho.length;b++)dset(a,ho[b],b); putbit(a,59,8); //end b=new Uint8Array(Math.ceil(a.length/8)); d=0; for(c=0;c<b.length;c++){ for(e=0;e<8;e++){ .........完整代码请登录后点击上方下载按钮下载查看
网友评论0