最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

javascript仿qq签名

来源:http://www.erdangjiade.com/ 沐浴春风 2015-05-03 18:11浏览(1589)

今天我们用javascript讲解如何使用不同背景生成不同签名,下一节我们讲述如何手动绘制签名。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

分类:其它特效 > jQuery插件 难易:高级
查看演示 下载资源 下载积分: 30 积分

HTML

首先我们放置一个自定义签名内容的输入框、背景图片下拉选择、生成签名的按钮、下载按钮及画布canvas

<canvas id="mycanvas" width="780" 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 class="btn" id="imgdownload">下载图片</a>

javascript

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, 00, 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"
}
标签: qq签名
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/99.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    03-10 08:37
    ngu137
    不错的特效功能,666
1 2