H5项目开发分享——用Canvas合成文字

以前曾用Canvas合成、裁剪、图片等《用H5中的Canvas等技术制作海报》。这次用Canvas来画文字。

下图中“老王考到驾照后”这几个字是画在Canvas上的，与在PS中打入的字非常接近，毫无违和感。

前面一段时间也在研读JavaScript设计模式相关的知识，这次正好小小的实践一下，但对设计模式的理解还不是很深。

一、项目总览

  

总共就两张页面，第一张是选择性别，输入名字，第二张页面是合成文字，并展示出来。

虽然页面很简单，但在做这个项目的时候，涉及到了很多方面，自定义字体、CSS3动画、Canvas、CSS3选择器、本地缓存、构建工具等。

下图是工程文件总览：

二、构建工具

目前开发采用的是自动化构建工具“gulp”，“config.js”和“gulpfile.js”都是配置文件。

关于这个工具，以前曾写过介绍《前端自动化构建工具gulp记录》

有了构建工具后，就能方便的压缩图片、压缩CSS、压缩JS、编译Sass文件、编译Jade文件、搭建本地服务器等。

网上有个很时髦的工具“webpack”，在构建工具也引用了，目前就仅仅用来合并JS。

三、HTML

1）Jade

不同于以前编写html，这里我使用了Jade，一个模版引擎。

通过使用Jade，可以将html中通用的抽象出来，还可以使用循环、条件、继承等特性，减少代码，代码也更可读。

Jade代码如下，下面是一个模版layout中的代码，其他页面可以继承他，这样很多通用的代码就不用再写了。

2）flexible.js

这段脚本是用来解决H5页面终端适配的。具体的使用方法可以参考这里。

在脚本中会做两个操作，

一个是放大，如果是IOS系统，那么会根据当前的设备像素比来做页面的放大操作，如果是Android就还是默认的。

例如Iphone6中设备像素比是2，那么就设置为0.5，也就是1/2。

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

另外一个就是计算rem的基准值，获取到“document.documentElement”的宽度，再除以10，作为一个基准值。

var width = docEl.getBoundingClientRect().width;
var rem = width / 10;

具体可以参考《移动开发屏幕适配分析》

三、CSS

1）Sass

目前开发CSS，会使用Sass预编译工具，它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。

Sass 有助于保持大型样式表结构良好，同时也让你能够快速开始小型项目。

通过Sass，可以将CSS模块化、代码更清晰、并且能将通用的代码抽象出来复用。

下面的代码是引用了自己写的一个库“PrimusUI”中的部分模块：

移动端开发，由于屏幕尺寸很多，所以用弹性布局，会比较方便，专门封装了一段操作弹性布局各个属性的代码“grid”。

传统的浮动布局，很容易出现各种问题，尤其是字体间的对齐，非常头疼，具体可以参考《CSS3伸缩盒Flexible Box》

2）自定义字体图标

上图中的“icon”，封装了自定义字体的CSS代码。

自定义字体图标相对于图片，有可控制大小、颜色、对齐更简单等优势。

并且现在移动端都能支持，适当的使用自定义字体可以提升页面性能。

国外有“Font Awesome”，国内有“iconfont”，iconfont中有丰富的图标，基本能满足你日常的开发需求，如果没有还可以自己制作矢量图，上传到网上自动转换。

我将用到的图标放到了一个项目中，以便重复使用。

3）CSS3

CSS3扩展了很多属性，下图中的选中的勾就是通过伪类实现的。

input[type=radio]:checked {
      background: url(../img/checked.png) no-repeat 32px 5px;
      background-size: 40px 40px;
}

还经常会用到伪对象选择符“::after”或“::before”，有了这两个就相当于多了两个标签。

上图中的长按保存这张图片就设置在伪对象中。

&::after {
    position: absolute;
    content: "";
    background: url(../img/prompt.png) no-repeat;
    width: 350px;
    top: 40px;
    left: 50%;
    margin-left: -175px;
    height: 70px;
    background-size: 100% 100%;
}

还会做一些小动画，脉冲，上下位移，渐变等，更多动画属性可以参考《CSS3中的动画效果记录》

四、JavaScript

1）通用模块

JS与CSS一样，也整理了一些通用的模块，在实际项目中，直接引用即可。

上面的模块一个封装了缓存，一个封装了平时需要操作DOM的相关方法。

DOM中有个方法是用于图片预加载的，主要是为了图片阻塞页面加载CSS、JS、HTML资源，提升页面性能，关于预加载可以参考《图片预加载与懒加载》

/**
 * 图片预加载
 */
$("img[data-src]").each(function() {
    var $this = $(this);
    var src = $this.data('src');
    dom.preImage(src, function() {
        $this.attr('src', src);
    });
});

2）命令模式封装的Canvas

命令模式是将请求与实现解耦并封装成独立对象，根据不同参数，执行不同功能。

这里将canvas画文本与合成图片封装了起来：

var CanvasCommand = (function() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 520;
    canvas.height = 500;

    var $compose = $('#compose');

    var Action = {
        fillText: function(font) {
            var canvas2 = document.createElement('canvas');
            var sizes = [], width=0;
            $.each(font, function(key, value) {
                sizes.push(value['size']);
                width += value['size'] * value['txt'].length + 5;
            });
            canvas2.width = width - 5;//画布宽度
            var max = Math.max.apply(this, sizes);

            canvas2.height = max * 1.5;//画布高度
            var ctx2 = canvas2.getContext('2d');
            ctx2.fillStyle = "#ffed03";
            ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
            var x = 0;
            $.each(font, function(key, value) {
                ctx2.font = (value['bold'] || '')+" "+value['size']+"px serif";
                ctx2.fillStyle = "black";
                ctx2.fillText(value['txt'], x, max);
                x += value['size'] * value['txt'].length + 5;
            });

            return canvas2;
        },
        fillImage: function(num, txts) {
            var qrcode = new Image();
            qrcode.src = 'img/qrcode.png';
            qrcode.onload = function() {
                var image = new Image();
                image.src = 'img/story/'+num+'.png';
                image.onload = function() {
                    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
                    ctx.drawImage(qrcode, 20, 400, 80, 80);
                    $.each(txts, function(key, value) {
                        ctx.drawImage(value, value.left, value.top, value.width, value.height);
                    });
                    var base64 = canvas.toDataURL("image/jpeg", 0.6);
                    $compose.attr('src', base64);
                };
            };
        }
    };
    return {
        /**
         * 命令格式 command,params
         * @param param
         */
        execute: function(param) {
            return Action[param.command].apply(Action, param.params);//执行命令
        }
    }
})();

1.这里使用了canvas中的fillText来渲染文本，在渲染的时候还通过font设置了字体，fillStyle设置了颜色，MDN上有篇canvas的基础教程。

2.canvas中的drawImage就是用来嵌入图片的，设置好起始坐标和图片大小后就能将图片展示在一起。

3.上面的操作就是：在一张预先写好文案的图片上写上动态输入的名字，再配上自定义文案和二维码图片。

  

源码地址：

https://github.com/pwstrick/road