我的第一个canvas的作品:漫画对白编辑器
背景:一直都对canvas挺有有兴趣的,之前刚刚看了《HTML5 CANVAS基础教程》,写了篇读书笔记。
起因:老婆发来一张最近比较热的漫画图(友谊的小船说翻就翻什么的)。这种漫画,经常PS一下,换个对白,就可以有许多个版本。想起canvas里面有对图片和文字编辑的功能,于是,想着可不可以用canvas实现自己编辑漫画的对白的功能。于是,画了一天的时间,修修改改,弄了个H5的页面出来。
功能说明:自己编辑对白,加入漫画背景当中去,生成一张新的漫画图片
优点:1.编辑完成后可以自动生成图片,可以保存转发到朋友圈中
2.对白部分,可以根据输入的文字长度,自适应背景来改变大小
缺点:1.对白有字数限制
2.字数太少时,对白的字体会因为自适应变大,看起来有点奇怪
思考:作品开发过程中基本没碰上什么困难。只有一点,输入字体和背景图片的关系处理比较麻烦。因为对白的外框使用的是漫画的背景图,所以限制了对白内容的大小,这样就不能根据对白的长度自适应大小。考虑过用canvas画图来实现对白框,但因为要另外改图、设计比较费时间,所以就放弃了。
源码:github链接:https://github.com/xujanus/xujanus.github.io/tree/master/boat
作品链接:http://xujanus.github.io/boat/index.html(建议在用微信扫描打开)
PS.作品中的漫画背景,取自于网络,只用于技术研究使用,版权归原作者所有
我的第一个canvas的作品:漫画对白编辑器的更多相关文章
- 手把手教你使用 js 实现一个 Canvas 编辑器
手把手教你使用 js 实现一个 Canvas 编辑器 拖拽 缩放,等比缩放 导出 image 模版 撤销,重做 OOP,封装,继承,多态 发布库 CI/CD (gitlab/github) ... h ...
- 分享一个自己制作的XML在线编辑器
前言 一年多没更新博客了,原因是疫情期间<骑马与砍杀2>发售,然后去写游戏MOD去了. 用C#大概写了7个月的游戏MOD,每天晚上肝到很晚,然后期间又因为介绍这个游戏MOD,学习了PR,然 ...
- [UWP]附加属性2:实现一个Canvas
5. 附加属性实践:自定义Canvas 附加属性在UWP中是一个十分重要的组成部分,很多功能都依赖于附加属性实现,典型的例子是常用的Grid和Canvas.通常附加属性有三个使用场景:插入属性.触发行 ...
- 分享一个Unity3D小作品,源码地址已公布在文章开头!
Update:回复量有点大,楼主工作期间可能无暇向童鞋们发送源码,为了不让童鞋们久等,现公布源码地址. 链接: http://pan.baidu.com/s/1sjpYW4d 密码: zhp9 请注 ...
- 《大教堂和集市》笔记——为什么一个本科生业余作品却成了全世界最流行的操作系统之一Linux?
1. Eric Raymond有一篇著名文章<大教堂和集市>(The Cathedral and the Bazaar). 他说,世界上的建筑可以分两种:一种是集市,天天开放在那里,从无到 ...
- 用初中数学知识撸一个canvas环形进度条
周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点. ...
- 怎样创建一个canvas画布环境
1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签: <!DOCTYPE html> <html lang="en"> < ...
- 一个canvas的demo
该demo放于tomcat下运行,否则出现跨域错误 <!DOCTYPE html> <html> <head> <meta charset="utf ...
- 创建一个Dribbble的作品展示
Most designers on dribbble have a personal portfolio website that usually consists of a name and a b ...
随机推荐
- Swiper Usage&&API
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,请指出,多谢!如果想获得国外较多而全的文档,还是用google. 一了解SwiperSwiper 是一款免费以及轻 ...
- 观察者模式(二)--《Head First DesignPattern》
我们用Java中自带的观察者模式接口来重写前面的例子. 先看一下类图: 这里用到了一个setChanged函数,它用来标记状态已经改变的事实,好让notifyObservers()知道当它调用时就应该 ...
- python(3)-lambda表达式
>>> fun = lambda a: a+1 >>> fun(1) 2 >>> fun = lambda a,b: a+b >>&g ...
- Mac OS X 配置 Apache+Mysql+PHP 详细教程
网上的教程已经有很多,这里简洁的记录一下.以 Mac OS X Mavericks 10.9.X 为例. 先附上如何进入指定目录文件夹,按键盘 Command + Shift + G ,然后输入指定目 ...
- hdu 4679 树状dp
思路:我们其实只需要枚举每条边,求得最小值就行了. 先dfs算出每个节点作为根时,其子树的最长路径,以及进过该节点的最长,次长,第三长路径. 然后在次dfs枚举求出切断某条边,求出这条边的两个端点为子 ...
- asp.net微信支付打通发货通知代码
上次遇到微信支付,发货接口的时候,官方的demo也没有提供相应的代码 ,因本人技术有限,百度 google 很久都没有asp.net 版本的,最后只好硬着头皮自己搞,没想到官方文档也是错的. 我这一步 ...
- java按行读取txt并按行写入
IO流想必大家都很熟悉了,本次实现的需求是按行读取文件内容并且按行写入,代码如下: try { String encoding="utf-8"; //设定自己需要的字符编码集 Fi ...
- getBoundingClientRect()兼容性处理
getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...
- MongoDB - Installing MongoDB on Linux
1. 下载最新稳定版本的安装包. [huey@huey mongodb]$ wget -c --no-check-certificate https://fossies.org/linux/misc/ ...
- C# 每天温习一点(IEnumerable<TSource>)
1, IEnumerable<TSource> 多数屌丝写成 IEnumerable<T> 无论TSource还是T都代表一个意思:要枚举的对象的类型 .IEnumerab ...