canvas 入门实战-邀请卡生成与下载

来源:守候

https://segmentfault.com/a/1190000012418898

1.前言

写了很多的javascript和css3的文章,是时候写一篇canvas的了。canvas是html5提供的一个新的功能!至于作用,就是一个画布。然后画笔就是javascript。canvas的用途非常的广,特别是html5游戏以及数据可视化这两个方面。现在canvas给我的感觉就和css3一样,可以不用太厉害,但是必须要会基础的用法。但是以后对canvas的需求,肯定会越来越大。所以canvas很值得学习,而且学好canvas,就是很好的一个加分项。对于这篇文章,我也是以canvas初学者的角度写的,会有很多改善的地方。如果大家觉得我有什么可以改善的,或者建议,欢迎指点迷津!代码已上传github,需要的欢迎star(downloadImg)。

大家看这篇文章之前,要了解javascript的一些基础,也要看着了解一些canvas的api(canvas-MSN教程,canvas菜鸟教程)

2.邀请卡实例

邀请卡自动生成这个会有的,毕竟有时候,很多邀请卡都是一样的,就是被邀请的人不一样而已,也就是说,整个邀请卡,就是一个名字不一样,那么下面。就写一套代码,根据名字生成邀请卡!

2-1.运行效果

html代码:

效果如图,那么大家细想一下,关于一张邀请卡,有什么东西是需要改变的!看到上图相比不难发现!有如下需要改变的属性:图片的大小,图片,用户名,用户名的坐标(x,y,x轴是否居中,y轴是否居中),用户名字体的大小,用户名字体的颜色,以及下载图片的类型。

这样就得到了如下的参数(大家看到有些参数是有值的,可以想成默认值就行了)

2-2.步骤1.初步效果

根据上面的参数,先初步画一个效果,代码基本都是一个写法,没什么技巧。

2.动态改变参数

看到图已经画好了,工作其实已经完成一半了!

下面就是动态改变参数!这一步其实很简单。

首先,改变画布的尺寸

上面代码设置了,只要输入框失去了焦点,就会改变画布的大小,下面来运行下,看下效果(gif图差强人意,大家看懂就好)

canvas没有层级的说法,只要改canvas,都要重绘。哪怕就是一个字移动一个像素。

做好了这个,下面做选择图片的功能!

下面开始改文字,用户名这个有点不一样,我以空格分割。如果输入多个用户名,以第一个用户名重绘。下面代码,注释就不写了,还是和上面的逻辑一样!

下面开始用户名的坐标,代码方面,也是改option的相关属性。

是否水平居中显示:

其他的属性,字体大小和颜色,基本是一样的代码,运行的效果图我不放了!

3.按钮操作

效果预览

就是预览当前canvas的一个效果,这个就很简单了,就是新开一个窗口,然后把图片写进去而已。

下载当前图片

下载图片这个,基本也是写法的,都是些记忆的东西。

批量下载图片

这个复杂一点,但也不难,下面一步一步来!

1、首先批量导出,那么用户名我这里是使用空格分割,那么现在我在option里面,弄一个字段textAll,所有文字的集合。all代表是否是批量下载。fn属性代表回调函数

2、然后修改绘制的函数draw,判断是否是全部绘制的情况!

3.小结

关于canvas入门的第一篇文章,就写到这里了。写完之后,也发现自己对canvas的也是有很多的不懂!上文的这例子,知识canvas很简单的一个入门实例。canvas如果深入学习,能做到很多让人惊讶的效果,这个得以后要加强学习,如果发现些值得记录的知识,我也会写文章。canvas是一个非常值得学习的知识,也是很有趣的一个知识。期待与大家有更多的交流和学习!

觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

本文来自企鹅号 - 前端大全媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

php正则表达式的分组捕获

经过测试,发现php正则表达式获取分组捕获是从$0开始,而平时工作中JavaScript中的正则是$1..$9

683
来自专栏大数据挖掘DT机器学习

中文分词实践(基于R语言)

背景:分析用户在世界杯期间讨论最多的话题。 思路:把用户关于世界杯的帖子拉下来,然后做中文分词+词频统计,最后将统计结果简单做个标签云. 后续:中文分词是中文...

3456
来自专栏Material Design组件

Material Design — 按钮( Buttons)

36416
来自专栏Python中文社区

Python爬虫一步步抓取房产信息

專 欄 ❈ Garfield_Liang,Python中文社区专栏作者。 简书地址:http://www.jianshu.com/u/cac1d39abfa9...

2676
来自专栏技术分享

.NET框架设计(高级框架架构模式)—钝化程序、逻辑冻结、冻结程序的延续、瞬间转移

阅读目录: 1.开篇介绍 2.程序书签(代码书签机制) 2.1ProgramBookmark 实现(使用委托来锚点代码书签) 2.2ProgramBookma...

19910
来自专栏FreeBuf

CTF小技巧:文本解密工具 Text Decoder Toolkit

欢迎来到文本解码挑战赛! T{4 G=C 9<=E B63 3<3;G /<2 9<=E G=C@A3:4^ G=C <332 <=B 43/@ B63 @3A...

22410
来自专栏郭霖

Android新特性介绍,ConstraintLayout完全解析

今天给大家带来2017年的第一篇文章,这里先祝大家新年好。 本篇文章的主题是ConstraintLayout。其实ConstraintLayout是Androi...

2117
来自专栏程序员叨叨叨

未来布局之星——ConstraintLayout

ConstraintLayout是Android Studio 2.2中具有亮点的新功能之一,相比于RelativeLayout、LinearLayout等传统...

512
来自专栏逆向技术

C语言_第一讲_C语言入门

一、C语言的简介 1.C语言是一个标准,而执行标准的时候产生的自动化程序则是编译器 2.了解:1983年美国国家标准化歇会(ANSI)制定了C语言标准. C语言...

1990
来自专栏移动开发之家

利用百度地图实现支付宝“到位”功能(地图模式)

算了,还是聊今天我们要说的,支付宝的“到位”功能。新版支付宝上方第四个tab,传闻丈母娘足不出户,同城招女婿的神兵利器。反正上面那些一块钱看看花、逛逛街、喝喝酒...

741

扫码关注云+社区