以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与在PS中打入的字非常接近,毫无违和感. 前面一段时间也在研读JavaScript设计模式相关的知识,这次正好小小的实践一下,但对设计模式的理解还不是很深. 一.项目总览    总共就两张页面,第一张是选择性别,输入名字,第二张页面是合成文字,并展示出来. 虽然页面很简单,但在做这个项目的时候,涉及到了很多方面…

前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动).主要是新品牌的推广需要,当然也有给公司以前老客户做的案例.今天主要总结下为新品牌开发的2个h5推广:就主要的运用技术,页面优化,以及存在的短板做总结. 一.主题与设计: 2个h5主题主要与4.1愚人节与5月的母亲节做对应:然后要比较婉转自然地为新品牌作铺垫,自然推广是主要的目的,但是又不能那么直白明显:所以2个h5分别选择了虚拟产品介绍与游戏参与为设计思路:主要设计图如下: 愚人节:       扫…

由于js的执行特性,多个js文件合成一个文件或者进行多个js文件加载时,时需要按照指定的顺序进行的,否则会出现报错的情况. 我们看一下目前几个主流H5引擎的做法. 白鹭的做法 当前版本的做法 在tsconfig.json中,使用的是outDir而不是outFile,这么设置ts只会讲单个的ts文件直接编译成对应的js文件,ts编译器完全不去管js文件的加载顺序. 白鹭自己的编译器,会自己去解析ts文件,从而确定js文件的顺序,用于加载和合并js文件,唯一的缺点是这种方法会导致编译耗时较长. 新版…

不谈国内社交网站(人人.微博等)目前的盈利状况如何,facebook.twitter都已经取得了很大的成功.这一定程度上都得益于人们对社交的喜爱和投入. 目前的情况来看,也有很多人已经对直接的文字分享呈现出一种厌倦的状态.有没有想过用自己绘制的简单图片来表达自己的心情,用绘画的形式表达自己的想法,并分享给自己的朋友?这又何尝不是一种新的乐趣呢? 不多说,直接给图给功能描述. 上图中左边是一个巨大的画板,可以在右上方的工具区域选择不同的工具,选择不同的画笔颜色.画笔线宽等基本功能,绘图完毕后便可以…

主要思路: 1.先分割为字符串数组,然后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串 2.计算另起的行总数,比如总共3行,也就是说将原来的一个长字符串按宽度分成了3行,然后循环绘制出这3行字符串即可. 注意事项: 就是需要 a-- 那里,防止丢失字符的情况,假如不 a-- 的话,那么每换行时就会少一个字. ctx.setFontSize() ctx.fillStyle = "#000"…

最近在uni-app项目中遇到一个合成分享图的需求,其实最开始是用原生写法来做的,后台发现在PC端测试是可以的,但在APP模拟器中会出现问题,可能是因为两者的js环境不同吧,uni-app官网也说了这两者不能等同 先来看看最开始写的原生方法 // 获取下载链接 getDownloadLink() { this.$axios .get('/app/address') .then(res => { console.log(res) this.downloadLink = res.data.data…

Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" width="150" height="150"></canvas> 或 let canvas = document.createElement("canvas"); 渲染上下文 CanvasRenderingContext2D…

Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常用功能,被Apache封装成一个个插件,如摄像头.传感器.网络.数据等.H5端通过调用插件,即可使用设备的这些功能.而项目具体的业务功能,也可封装成自定义的插件,供H5端调用,如:App端分享功能.支付功能.扫码.定位.自定义键盘等. Cordova提供了完整的机制,使得H5.安卓.IOS等平台混合…

前言 H5即HTML5,H5开发具有低成本.高效率.跨平台.研发周期短,用户接触成本低等特性. 一.开发环境 在开发一个H5项目之前,需要先搞好环境.主要有node.npm.gulp.bower.下面分别介绍一下这些工具的安装和使用. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.然后点击大大的绿色的install 按钮,下载完成后直接运行程序,就一切准备就绪. npm 会随着安装包一起安装,稍后会用到它. 接下来,可以使用命令行来检测Node和npm是否正确安装:…

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