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