手机怎样用网站做成软件,建筑方案设计师的工作内容,织梦建站模板,沈阳网站关键词优化以前曾用Canvas合成、裁剪、图片等《用H5中的Canvas等技术制作海报》。这次用Canvas来画文字。 下图中“老王考到驾照后”这几个字是画在Canvas上的#xff0c;与在PS中打入的字非常接近#xff0c;毫无违和感。 前面一段时间也在研读JavaScript设计模式相关的知识#xff0… 以前曾用Canvas合成、裁剪、图片等《用H5中的Canvas等技术制作海报》。这次用Canvas来画文字。 下图中“老王考到驾照后”这几个字是画在Canvas上的与在PS中打入的字非常接近毫无违和感。 前面一段时间也在研读JavaScript设计模式相关的知识这次正好小小的实践一下但对设计模式的理解还不是很深。 一、项目总览 总共就两张页面第一张是选择性别输入名字第二张页面是合成文字并展示出来。 虽然页面很简单但在做这个项目的时候涉及到了很多方面自定义字体、CSS3动画、Canvas、CSS3选择器、本地缓存、构建工具等。 下图是工程文件总览 二、构建工具 目前开发采用的是自动化构建工具“gulp”“config.js”和“gulpfile.js”都是配置文件。 关于这个工具以前曾写过介绍《前端自动化构建工具gulp记录》 有了构建工具后就能方便的压缩图片、压缩CSS、压缩JS、编译Sass文件、编译Jade文件、搭建本地服务器等。 网上有个很时髦的工具“webpack”在构建工具也引用了目前就仅仅用来合并JS。 三、HTML 1Jade 不同于以前编写html这里我使用了Jade一个模版引擎。 通过使用Jade可以将html中通用的抽象出来还可以使用循环、条件、继承等特性减少代码代码也更可读。 Jade代码如下下面是一个模版layout中的代码其他页面可以继承他这样很多通用的代码就不用再写了。 2flexible.js 这段脚本是用来解决H5页面终端适配的。具体的使用方法可以参考这里。 在脚本中会做两个操作 一个是放大如果是IOS系统那么会根据当前的设备像素比来做页面的放大操作如果是Android就还是默认的。 例如Iphone6中设备像素比是2那么就设置为0.5也就是1/2。 meta nameviewport contentinitial-scale0.5, maximum-scale0.5, minimum-scale0.5, user-scalableno 另外一个就是计算rem的基准值获取到“document.documentElement”的宽度再除以10作为一个基准值。 var width docEl.getBoundingClientRect().width;
var rem width / 10; 具体可以参考《移动开发屏幕适配分析》 三、CSS 1Sass 目前开发CSS会使用Sass预编译工具它允许你使用变量、嵌套规则、 mixins、导入等众多功能并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好同时也让你能够快速开始小型项目。 通过Sass可以将CSS模块化、代码更清晰、并且能将通用的代码抽象出来复用。 下面的代码是引用了自己写的一个库“PrimusUI”中的部分模块 移动端开发由于屏幕尺寸很多所以用弹性布局会比较方便专门封装了一段操作弹性布局各个属性的代码“grid”。 传统的浮动布局很容易出现各种问题尤其是字体间的对齐非常头疼具体可以参考《CSS3伸缩盒Flexible Box》 2自定义字体图标 上图中的“icon”封装了自定义字体的CSS代码。 自定义字体图标相对于图片有可控制大小、颜色、对齐更简单等优势。 并且现在移动端都能支持适当的使用自定义字体可以提升页面性能。 国外有“Font Awesome”国内有“iconfont”iconfont中有丰富的图标基本能满足你日常的开发需求如果没有还可以自己制作矢量图上传到网上自动转换。 我将用到的图标放到了一个项目中以便重复使用。 3CSS3 CSS3扩展了很多属性下图中的选中的勾就是通过伪类实现的。 input[typeradio]: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 [], width0;$.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 转载于:https://www.cnblogs.com/strick/p/6158320.html
