背景:一直都对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(建议在用微信扫描打开)我的第一个canvas的作品:漫画对白编辑器-LMLPHP

PS.作品中的漫画背景,取自于网络,只用于技术研究使用,版权归原作者所有

05-02 06:39