HTML5自定义文字背景.rar_HTML5自定义文字背景_html5文字

共5个文件

png：3个

ttf：1个

html：1个

版权申诉

108 浏览量 2022-09-15 01:17:15 上传评论收藏 3.31MB RAR 举报

资源详情

资源评论

资源推荐

收起资源包目录

HTML5自定义文字背景.rar （5个子文件）

html5-qq-text-background

fonts

hychf.ttf 2.77MB

index.html 3KB

imgs

bg5.png 335KB

bg3.png 393KB

bg4.png 640KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5自定义文字背景生成QQ签名档DEMO演示</title> <style> body{background-color: #ddd;-webkit-user-select:none;font-family:hychf,"黑体";margin: 0;} @font-face{font-family:hychf; src:url('fonts/hychf.ttf');} canvas{border: 1px solid #777;display: block;margin: auto;} #imgdownload{width: 100px;height: 30px;display: block;text-decoration: none;text-align: center;line-height: 30px;border: 1px solid #000;border-radius: 6px;} </style> </head> <body> <canvas id="mycanvas" width="1280" height="512"></canvas> 内容：<input type="text" id="mytxt1" value="HTML5TRICKS" /> 文字背景图：<select id="dbg"> <option value="bg4.png">bg4.png</option> <option value="bg5.png">bg5.png</option> </select> <input type="button" id="send" value="生成签名档" /> <a href="#" id="imgdownload">下载图片</a> <script> var mycanvas=document.getElementById("mycanvas"); var mytxt1=document.getElementById("mytxt1"); var dbg=document.getElementById("dbg"); var imgdownload=document.getElementById("imgdownload"); var ctx=mycanvas.getContext("2d"); var bg=new Image(); var bg2=new Image(); bg.src='imgs/bg3.png'; bg2.src='imgs/bg4.png'; bg2.onload=ShowImg; function ShowImg(){ bg2.src='imgs/'+dbg.value; ctx.drawImage(bg,0,0,mycanvas.width,mycanvas.height); ctx.save(); var fpadd=200;//规定内间距 var fsz=Math.ceil((mycanvas.width-fpadd*2)/mytxt1.value.length);//根据字数计算字体大小 ctx.font=fsz+"px hychf"; var tw=ctx.measureText(mytxt1.value).width;//文字真实宽度 var ftop=(mycanvas.height-fsz)/2-30;//根据字体大小计算文字top var fleft=(mycanvas.width-tw)/2+16;//根据字体大小计算文字left ctx.textBaseline="top";//设置绘制文本时的文本基线。 var woodfill = ctx.createPattern(bg2,"repeat");//设置图片为笔刷 ctx.fillStyle=woodfill; ctx.shadowBlur=10;//阴影程度 ctx.shadowOffsetX=20; ctx.shadowOffsetY=20; ctx.shadowColor="rgba(0,0,0,1)"; ctx.fillText(mytxt1.value,fleft,ftop); ctx.lineWidth = 1; ctx.strokeStyle ="rgba(255,255,255,0.4)"; ctx.strokeText(mytxt1.value, fleft, ftop); ctx.restore(); } document.getElementById("send").onclick=ShowImg; imgdownload.onclick=function(){ if(!mytxt1.value){alert('请输入内容');return false;} this.href = mycanvas.toDataURL(); this.target = "_blank"; this.download =mytxt1.value + ".png"; } </script> <div style="text-align:center;clear:both;"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> </body> </html>