Learn HTML Canvas: Advanced Text Effects

成为Web动画大师。

从绘制单个字母到多行动画粒子文本。在此 HTML canvas 速成课程中，我们将在一堂课中从基础到高级。我们将涵盖您需要了解的有关在 HTML 画布上使用字体和绘制文本的所有信息。让我们探索现代前端 Web 开发的可能性，并将文本转换为复杂的动画粒子系统。

在没有框架和库的情况下练习 vanilla JavaScript

了解如何在简单的程序（逐行）代码库中编写创意编码原型和实验。将这些实验转化为更加模块化的面向对象的 JavaScript 语法。

试验代码

和我一起一步一步学习如何创建效果的基础版本。应用星座算法获得完全不同的视觉效果。了解如何使用画布渐变、自定义Web字体以及如何更改粒子形状和物理特性以获得不同的视觉效果和运动。

此技术也适用于公司徽标，即使徽标是文本、符号和图像的组合。

包括源代码

在最后一课中，您可以下载完整的源代码，以及我对代码库的一些实验性变体。

从基础到高级

需要具备 HTML、CSS 和 JavaScript 的基本知识。课程的第一部分对初学者非常友好，我们将学习如何设置 HTML 画布，如何使用 fillText 和 strokeText 内置方法绘制文本，我们将涵盖所有可用的工具和技术来设计它。

第二部分将涵盖更高级的算法。我们将学习如何在 HTML 画布上绘制多行居中文本，如何将其转换为粒子，如何使这些粒子系统具有交互性等等。

玩得开心！:)