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是一个非常值得学习的知识，也是很有趣的一个知识。期待与大家有更多的交流和学习！

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

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