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

  • 相关阅读:
    计算机知识
    试题:论需求分析方法及应用
    试题:论信息系统开发方法及应用
    爬虫数据存储——安装docker和ElasticSearch(基于Centos7)
    go并发版爬虫
    go单任务版爬虫
    可变类型与不可变类型
    基本数据类型内置方法
    @submit.native.prevent作用
    获取当月第一天,今天的日期的方法
  • 原文地址:https://www.cnblogs.com/xujanus/p/5403715.html
Copyright © 2011-2022 走看看