以前曾用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。

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

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

  1. var width = docEl.getBoundingClientRect().width;
  2. 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扩展了很多属性,下图中的选中的勾就是通过伪类实现的。

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

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

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

  1. &::after {
  2. position: absolute;
  3. content: "";
  4. background: url(../img/prompt.png) no-repeat;
  5. width: 350px;
  6. top: 40px;
  7. left: 50%;
  8. margin-left: -175px;
  9. height: 70px;
  10. background-size: 100% 100%;
  11. }

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

四、JavaScript

1)通用模块

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

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

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

  1. /**
  2. * 图片预加载
  3. */
  4. $("img[data-src]").each(function() {
  5. var $this = $(this);
  6. var src = $this.data('src');
  7. dom.preImage(src, function() {
  8. $this.attr('src', src);
  9. });
  10. });

2)命令模式封装的Canvas

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

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

  1. var CanvasCommand = (function() {
  2. var canvas = document.createElement('canvas');
  3. var ctx = canvas.getContext('2d');
  4. canvas.width = 520;
  5. canvas.height = 500;
  6.  
  7. var $compose = $('#compose');
  8.  
  9. var Action = {
  10. fillText: function(font) {
  11. var canvas2 = document.createElement('canvas');
  12. var sizes = [], width=0;
  13. $.each(font, function(key, value) {
  14. sizes.push(value['size']);
  15. width += value['size'] * value['txt'].length + 5;
  16. });
  17. canvas2.width = width - 5;//画布宽度
  18. var max = Math.max.apply(this, sizes);
  19.  
  20. canvas2.height = max * 1.5;//画布高度
  21. var ctx2 = canvas2.getContext('2d');
  22. ctx2.fillStyle = "#ffed03";
  23. ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
  24. var x = 0;
  25. $.each(font, function(key, value) {
  26. ctx2.font = (value['bold'] || '')+" "+value['size']+"px serif";
  27. ctx2.fillStyle = "black";
  28. ctx2.fillText(value['txt'], x, max);
  29. x += value['size'] * value['txt'].length + 5;
  30. });
  31.  
  32. return canvas2;
  33. },
  34. fillImage: function(num, txts) {
  35. var qrcode = new Image();
  36. qrcode.src = 'img/qrcode.png';
  37. qrcode.onload = function() {
  38. var image = new Image();
  39. image.src = 'img/story/'+num+'.png';
  40. image.onload = function() {
  41. ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  42. ctx.drawImage(qrcode, 20, 400, 80, 80);
  43. $.each(txts, function(key, value) {
  44. ctx.drawImage(value, value.left, value.top, value.width, value.height);
  45. });
  46. var base64 = canvas.toDataURL("image/jpeg", 0.6);
  47. $compose.attr('src', base64);
  48. };
  49. };
  50. }
  51. };
  52. return {
  53. /**
  54. * 命令格式 command,params
  55. * @param param
  56. */
  57. execute: function(param) {
  58. return Action[param.command].apply(Action, param.params);//执行命令
  59. }
  60. }
  61. })();

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

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

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

  

源码地址:

https://github.com/pwstrick/road

H5项目开发分享——用Canvas合成文字的更多相关文章

  1. 近期H5项目开发小结

    前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动).主要是新品牌的推广需要,当然也有给公司以前老客户做的案例.今天主要总结下为新品牌开发的2个h5推广:就 ...

  2. 关于H5项目开发中TS(或JS)文件按照顺序编译成一个文件的记录

    由于js的执行特性,多个js文件合成一个文件或者进行多个js文件加载时,时需要按照指定的顺序进行的,否则会出现报错的情况. 我们看一下目前几个主流H5引擎的做法. 白鹭的做法 当前版本的做法 在tsc ...

  3. 画板社交工具开发分享——HTML5 canvas控件、PHP、社交分享学习(一)

    不谈国内社交网站(人人.微博等)目前的盈利状况如何,facebook.twitter都已经取得了很大的成功.这一定程度上都得益于人们对社交的喜爱和投入. 目前的情况来看,也有很多人已经对直接的文字分享 ...

  4. 微信小程序生成海报分享:canvas绘制文字溢出如何换行

    主要思路: 1.先分割为字符串数组,然后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串 2.计算另起的 ...

  5. 关于canvas合成分享图

    最近在uni-app项目中遇到一个合成分享图的需求,其实最开始是用原生写法来做的,后台发现在PC端测试是可以的,但在APP模拟器中会出现问题,可能是因为两者的js环境不同吧,uni-app官网也说了这 ...

  6. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  7. Android H5混合开发(1):构建Cordova 项目

    Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常 ...

  8. 如何开发H5项目 -- 入门篇

    前言 H5即HTML5,H5开发具有低成本.高效率.跨平台.研发周期短,用户接触成本低等特性. 一.开发环境 在开发一个H5项目之前,需要先搞好环境.主要有node.npm.gulp.bower.下面 ...

  9. 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享

    http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章 ...

随机推荐

  1. ASP.NET Core 中文文档 第四章 MVC(3.8)视图中的依赖注入

    原文:Dependency injection into views 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:孟帅洋(书缘) ASP.NET Core 支持在视图中使用 依赖 ...

  2. 苹果强制使用HTTPS传输了怎么办?——关于HTTPS,APP开发者必须知道的事

    WeTest 导读 2017年1月1日起,苹果公司将强制使用HTTPS协议传输.本文通过对HTTPS基础原理和通信过程内容的讲解,介绍APP开发者在这个背景下的应对办法. 几周前,我们在<htt ...

  3. WebApi接口 - 如何在应用中调用webapi接口

    很高兴能再次和大家分享webapi接口的相关文章,本篇将要讲解的是如何在应用中调用webapi接口:对于大部分做内部管理系统及类似系统的朋友来说很少会去调用别人的接口,因此可能在这方面存在一些困惑,希 ...

  4. Android Notification 详解(一)——基本操作

    Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...

  5. Xamarin+Prism小试牛刀:定制跨平台Outlook邮箱应用

    通过本文你将学会如下内容: 1,如何使用Xamarin开发跨平台(Windows,Android,iOS)应用. 2,如何使用微软的登录界面登入Microsoft账号. 3,如何使用Outlook邮箱 ...

  6. 「译」JUnit 5 系列:条件测试

    原文地址:http://blog.codefx.org/libraries/junit-5-conditions/ 原文日期:08, May, 2016 译文首发:Linesh 的博客:「译」JUni ...

  7. 【转】java通用URL接口地址调用方式GET和POST方式

    java通用URL接口地址调用方式GET和POST方式,包括建立请求和设置请求头部信息等等......... import java.io.ByteArrayOutputStream; import ...

  8. 自定义鼠标光标cursor

    通过css属性 Cursor:url()自定义鼠标光标. {cursor:url('图标路径'),default;} url是自定义鼠标图标路径 default指的是定义默认的光标(通常是一个箭头), ...

  9. 笔记:Memory Notification: Library Cache Object loaded into SGA

    笔记:Memory Notification: Library Cache Object loaded into SGA在警告日志中发现一些这样的警告信息:Mon Nov 21 14:24:22 20 ...

  10. 编写一个通用的Makefile文件

    1.1在这之前,我们需要了解程序的编译过程 a.预处理:检查语法错误,展开宏,包含头文件等 b.编译:*.c-->*.S c.汇编:*.S-->*.o d.链接:.o +库文件=*.exe ...