HTML5+CSS+jQuery综合案例提高教程-视频课程-学汇网

从头开始，带你去写一个把文字转换成图片的小工具。适合于已经有了一定的前端基础（HTML+CSS+JQuery 入门），但又不知道自己能做些什么，应该怎样去做的同学。

从一个接近于小白的视角，去思考去分析，细致的做出每一步。难度不大，但是技术是次要的内容，思考的方法和解决问题的思路才是学习的重点。

许多同学以为前端，只是写写网页，做做排版，其实前端的可玩性也是非常之高的，去了解去尝试，你会获得更多的乐趣，从而更喜欢钻研前端的技术。

需要基础：HTML+CSS 入门，对 JavaScript 和 JQuery 的简单了解

学习重点：HTML5 Canvas 画布中文字的操作

相关知识：BoootStrap 和 JQuery 的应用，以及外部字体的引用等

效果预览

课程目录

一、初步实现功能
1、需求的分析 3分50秒

我们为什么需要把文字转为图片，有哪些应用场景。
2、前期的准备 8分1秒

BootStrap 和 JQuery 的下载，以及文件的初步准备
3、初步的尝试 9分5秒

尝试能不能通过对文档的初步阅读完成在 Canvas 画布上绘制文字的功能
4、初步的美化 24分29秒

使用 BootStrap 做初步的布局和美化，让我们在后面的测试过程中不至于视觉污染
5、初步可使用 14分8秒

完善具体流程，实现输入文字然后在画布上写出文字的基本流程
6、初步的优化 13分11秒

增加了一些设置项，即可以对 Canvas 上文字参数进行调节
二、功能的完善
7、让字体飞 A 25分10秒

在网上查找参考资料的一些技巧，以及如何为网页设置外部字体（@font-face），另外还有彩蛋，哼哼~~
8、让字体飞 B 16分8秒

对于 Canvas 画布上的文字进行字体设置（使用外部字体文件）
9、背景的完善 8分24秒

为 Canvas 画布设置背景颜色
三、格式与排版的优化
10、定位的问题 15分钟

对 Canvas 画布中文字的定位方式进行一个测试分析和总结
11、定位的控制 13分41秒

对 Canvas 画布中的文字进行对齐方式的设置，并且根据对齐方式修改定位的基准点
12、合适的高度 17分52秒

让 Canvas 画布的高度根据内容自动进行调整
13、我要换行啦 25分42秒

我们在 Canvas 画布中的文字支持用回车进行换行了，其实应该算是分段才对
14、计算很简单 16分29秒

上一节课的计算有点乱？没关系，我们一起画图整理一下
15、调整下细节 18分8秒

一些细节的完善工作，这个要时不时的做一下，免得积累多了代码混乱
四、更智能的排版
16、自动折行 A 9分40秒

让 Canvas 根据文字的宽度自动在合适的位置进行换行
17、自动折行 B 12分11秒

让 Canvas 根据文字的宽度自动在合适的位置进行换行
18、自动折行 C 12分33秒

让 Canvas 根据文字的宽度自动在合适的位置进行换行
19、自动折行 D 26分59秒

让 Canvas 根据文字的宽度自动在合适的位置进行换行
20、自动折行 E 23分45秒

让 Canvas 根据文字的宽度自动在合适的位置进行换行
五、优化与提升
21、保存图片 16分55秒

如何将 Canvas 画布保存为图片，以及如何书写一个下载链接
22、一些美化 17分8秒

对我们的成果进行一些美化，并对本次课程进行一个总结

一、初步实现功能
1、需求的分析 3分50秒

我们为什么需要把文字转为图片，有哪些应用场景。
2、前期的准备 8分1秒

BootStrap 和 JQuery 的下载，以及文件的初步准备
3、初步的尝试 9分5秒

尝试能不能通过对文档的初步阅读完成在 Canvas 画布上绘制文字的功能
4、初步的美化 24分29秒

使用 BootStrap 做初步的布局和美化，让我们在后面的测试过程中不至于视觉污染
5、初步可使用 14分8秒

完善具体流程，实现输入文字然后在画布上写出文字的基本流程
6、初步的优化 13分11秒

增加了一些设置项，即可以对 Canvas 上文字参数进行调节
二、功能的完善
7、让字体飞 A 25分10秒

在网上查找参考资料的一些技巧，以及如何为网页设置外部字体（@font-face），另外还有彩蛋，哼哼~~
8、让字体飞 B 16分8秒

对于 Canvas 画布上的文字进行字体设置（使用外部字体文件）
9、背景的完善 8分24秒

为 Canvas 画布设置背景颜色
三、格式与排版的优化
10、定位的问题 15分钟

对 Canvas 画布中文字的定位方式进行一个测试分析和总结
11、定位的控制 13分41秒

对 Canvas 画布中的文字进行对齐方式的设置，并且根据对齐方式修改定位的基准点
12、合适的高度 17分52秒

让 Canvas 画布的高度根据内容自动进行调整
13、我要换行啦 25分42秒

我们在 Canvas 画布中的文字支持用回车进行换行了，其实应该算是分段才对
14、计算很简单 16分29秒

上一节课的计算有点乱？没关系，我们一起画图整理一下
15、调整下细节 18分8秒

一些细节的完善工作，这个要时不时的做一下，免得积累多了代码混乱
四、更智能的排版
16、自动折行 A 9分40秒

让 Canvas 根据文字的宽度自动在合适的位置进行换行
17、自动折行 B 12分11秒

让 Canvas 根据文字的宽度自动在合适的位置进行换行
18、自动折行 C 12分33秒

让 Canvas 根据文字的宽度自动在合适的位置进行换行
19、自动折行 D 26分59秒

让 Canvas 根据文字的宽度自动在合适的位置进行换行
20、自动折行 E 23分45秒

让 Canvas 根据文字的宽度自动在合适的位置进行换行
五、优化与提升
21、保存图片 16分55秒

如何将 Canvas 画布保存为图片，以及如何书写一个下载链接
22、一些美化 17分8秒

对我们的成果进行一些美化，并对本次课程进行一个总结

正在加载...

学完了课程，我也来点评一下