• 热门专题

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

作者:咖啡机(K.F.J)  发布日期:2016-12-22 20:36:26
Tag标签:项目开发  文字  
  • 以前曾用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

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规