背景:一直都对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.作品中的漫画背景,取自于网络,只用于技术研究使用,版权归原作者所有