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

分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上。点击生成QQ签名档即可将文字背景融为一体生成另外一张图片,你也可以下载这张拥有你QQ签名档的图片。

在线预览   源码下载

实现的代码。

html代码:

  <canvas id="mycanvas" width="1280" 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 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.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>

css代码:

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

via:http://www.w2bc.com/Article/25804

时间: 03-05

基于HTML5自定义文字背景生成QQ签名档的相关文章

基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: <style type="text/css"> #liu{ width:280px; height: 279px; background: url(shishi.png) no-repeat; border-radius:140px; -webkit-animation:run 6s

基于HTML5 Canvas粒子效果文字动画特效

之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,相当酷的动画效果. 在线预览   源码下载 实现的代码. html代码: <canvas class="canvas"></canvas> <div class="help"> ?</div> <div c

基于html5背景图片自适应代码

基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jawbone-hero-image { position:absolute; background:transparent none no-repeat scroll 50% 0; background-size:cover; top:0; bottom:0; left:0; right:0; widt

10款基于html5+css3实现的动画的源码

1.CSS3简易清新的下拉菜单 对于CSS3菜单我们已经在以前分享过很多了,有华丽的动画菜单,也有冲击视觉的3D菜单,今天要介绍的是一款简易而实用的下拉菜单,绿色的主题风格,让菜单的外观看上去非常清新,下拉菜单的颜色和主菜单的颜色搭配也非常不错. 在线演示 源码下载 2.HTML5自定义背景图片的文字特效 在HTML5和CSS3标准出来之前,文字的背景只能是纯色,更不用说是自定义背景图片了.然而,强大的HTML5不仅让文字背景支持渐变颜色,而且支持自定义的背景图片,这些图片就像遮罩层,让文字的背

快速开发基于 HTML5 网络拓扑图应用

采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html 该例子展示了如何构建两个节点.一条连线.以及一个 Group 的组合效果.结合 <数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型,以下为构建上图界面效果

一个酷炫的,基于HTML5,Jquery和Css的全屏焦点图特效,兼容各种浏览器

基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/199

基于HTML5的PACS--HTML5图像处理

在此之前,此系统是结合DICOM的WADO标准,在浏览器里通过javascript操作返回的JPG图片.这种服务器端解析,客户端展现的方式,对实现图像的移动.缩放.旋转.测量等图像操作能够实现实时的交互.但这种方式存在着几个弊端: 1.获取图像上的CT值(钙化值)信息的时候,要频繁的和服务器进行交互. 2.调整图像的窗宽窗位或者对图像进行反色,也要和服务器进行频繁的交互. 3.对图像进行测量(长方形测量,椭圆测量等)只能获取到面值和周长的简单的信息,这对于医生的诊断没多大的用处,实际运用中需要知

基于Android MPAndroidChart实现腾讯QQ群数据统计报表核心功能

 基于Android MPAndroidChart实现腾讯QQ群数据统计报表核心功能 腾讯QQ移动客户端(新版)的QQ群有一项功能比较有趣,是关于QQ群的.QQ群新增一项功能开放给具有管理权限的群成员:管理群 -> 群数据 中,会看到QQ群的一些基础数据统计报表,如人数.发言条数的统计报表,如图: 我之前写了一篇文章是关于Android平台上的一个统计报表的开源框架MPAndroidChart,文章介绍了如何在自己的项目中使用MPAndroidChart制作统计报表,同时给出了基本折线图的一

基于HTML5的Drag and Drop生成图片Base64信息

直击现场 基于HTML5的Drag and Drop生成图片Base64信息 发表于4个月前(2014-12-19 00:58)   阅读(103) | 评论(0) 11人收藏此文章, 我要收藏 赞0 慕课网,程序员升职加薪神器,点击免费学习 摘要 HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的字符串信