javascript仿qq签名

收藏

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

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

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 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, 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"; 
}