HTML5自定义文字背景生成签名档

最新推荐文章于 2023-09-08 14:58:29 发布

jennypypy

最新推荐文章于 2023-09-08 14:58:29 发布

阅读量1.8k

点赞数

分类专栏： canvas html5 文章标签： canvas html5

本文链接：https://blog.csdn.net/panying0903/article/details/44057367

版权

html5 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
    <head>  
        <meta charset="utf-8">
        <title>HTML5自定义文字背景生成签名档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="320" height="256"></canvas>
		<label for="mytxt1">内容：
			<input type="text" id="mytxt1" value="HTML5TRICKS" />
		</label>
		<label for="dbg">文字背景图：
			<select id="dbg">
				<option value="bg4.png">bg4.png</option>
				<option value="bg5.png">bg5.png</option>
			</select>
		</label>
		<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.οnlοad=ShowImg;
            
            function ShowImg(){
                bg2.src='imgs/'+dbg.value;
                ctx.drawImage(bg,0,0,mycanvas.width,mycanvas.height);
                ctx.save();
                var fpadd=0;//规定内间距
                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";
            }
              
        </script>

</div>
</body>
</html>

效果图：( journey )

jennypypy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5自定义文字背景生成签名档

HTML5自定义文字背景生成签名档DEMO body{ background-color: #ddd;-webkit-user-select:none;font-family:hychf,"黑体";margin: 0; } @font-face{ font-family:hychf; src:url('font
复制链接

扫一扫