素材网 素材网

HTML5生成艺术文字特效 自定义文字生成

下载资源()次

阅读次数()次

发布时间:2015-05-12

HTML5生成艺术文字特效 自定义文字生成
分享到:

用法简介:

来源:xw素材网

HTML5生成艺术文字特效 自定义文字生成。
文件引用:

<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>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。