背景:一直都对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的作品:漫画对白编辑器的更多相关文章

  1. 手把手教你使用 js 实现一个 Canvas 编辑器

    手把手教你使用 js 实现一个 Canvas 编辑器 拖拽 缩放,等比缩放 导出 image 模版 撤销,重做 OOP,封装,继承,多态 发布库 CI/CD (gitlab/github) ... h ...

  2. 分享一个自己制作的XML在线编辑器

    前言 一年多没更新博客了,原因是疫情期间<骑马与砍杀2>发售,然后去写游戏MOD去了. 用C#大概写了7个月的游戏MOD,每天晚上肝到很晚,然后期间又因为介绍这个游戏MOD,学习了PR,然 ...

  3. [UWP]附加属性2:实现一个Canvas

    5. 附加属性实践:自定义Canvas 附加属性在UWP中是一个十分重要的组成部分,很多功能都依赖于附加属性实现,典型的例子是常用的Grid和Canvas.通常附加属性有三个使用场景:插入属性.触发行 ...

  4. 分享一个Unity3D小作品,源码地址已公布在文章开头!

    Update:回复量有点大,楼主工作期间可能无暇向童鞋们发送源码,为了不让童鞋们久等,现公布源码地址.  链接: http://pan.baidu.com/s/1sjpYW4d 密码: zhp9 请注 ...

  5. 《大教堂和集市》笔记——为什么一个本科生业余作品却成了全世界最流行的操作系统之一Linux?

    1. Eric Raymond有一篇著名文章<大教堂和集市>(The Cathedral and the Bazaar). 他说,世界上的建筑可以分两种:一种是集市,天天开放在那里,从无到 ...

  6. 用初中数学知识撸一个canvas环形进度条

    周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点. ...

  7. 怎样创建一个canvas画布环境

    1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签: <!DOCTYPE html> <html lang="en"> < ...

  8. 一个canvas的demo

    该demo放于tomcat下运行,否则出现跨域错误 <!DOCTYPE html> <html> <head> <meta charset="utf ...

  9. 创建一个Dribbble的作品展示

    Most designers on dribbble have a personal portfolio website that usually consists of a name and a b ...

随机推荐

  1. php中var_export与var_dump的区别分析

    一 var_dump (PHP 3 >= 3.0.5, PHP 4, PHP 5) var_dump -- 打印变量的相关信息 描述 void var_dump ( mixed expressi ...

  2. eclipse 总是提示文件下载

    在首选项->phpeclipse web development ->brower preview default 勾选掉

  3. css笔记14:css文件之间可以相互引用

    css文件之间相互引用是通过@import指令完成的 格式: @import  url("被引用的css文件"); 顺便说一句,如果希望在html或者php文件中引用某个xxx.c ...

  4. Recovery启动流程(3)--recovery.cpp分析

    转载请注明来源:cuixiaolei的技术博客 这篇文章主要通过分析高通recovery目录下的recovery.cpp源码,对recovery启动流程有一个宏观的了解.MTK和高通的recovery ...

  5. 用css做类似表格的布局

    --2013年6月24日12:08:49 今天突然不想用table了,就在园子里找了几个用css的解决办法,直接上代码: --1.html代码: <!DOCTYPE html PUBLIC &q ...

  6. CSS的总结(选择器,伪类等...)

    关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...

  7. MSP430常见问题之电源类

    Q1:msp430(我用的4619)的VCC,DVCC,VSS,DVSS怎么接啊?模拟的和数字的一样吗?A1:CC 就是正,SS 就是负,A是模拟电,D 是数字电,A的都接在一起,D 的都接在一起,地 ...

  8. discuze回放提示“抱歉,您的请求来路不正确或表单验证串不符,无法提交”

    不知从哪里看到文章,但是实用: 背景:discuze就单纯的录制一个注册脚本,日志中没有报错,在报告中就提示"抱歉,您的请求来路不正确或表单验证串不符,无法提交"",以下 ...

  9. less-1

    说在前面的话,为什么用less: 1.需要编写的代码明显变少了 2.css管理更加容易 3.less学习成本低 4.使用less实现配色变得非常容易 5.兼容css3,实现各个浏览器中css的兼容写法 ...

  10. 使用spring+mybatis+atomikos+tomcat构建分布式事务

    本文通过一个demo,介绍如何使用spring+mybatis+atomikos+tomcat构建在一个事务中涉及两个数据源的web应用. demo功能:实现一个能成功提交和回滚的涉及两个数据库数据源 ...