html5字体em,html5字体设置图片生成QQ签名字体样式

特效描述：html5字体设置 图片生成 QQ签名字体。html5 canvas字体设置生成图片字体样式，QQ签名字体样式，进击のXX生成器支持字数无限。

代码结构

1. HTML代码

内容：

文字背景图：

bg4.png

bg5.png

下载图片

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.οnlοad=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").οnclick=ShowImg;

imgdownload.οnclick=function(){

if(!mytxt1.value){alert('请输入内容');return false;}

this.href = mycanvas.toDataURL();

this.target = "_blank";

this.download =mytxt1.value + ".png";

}