|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/
课程评论：没有评论
**课程名称：** 学习 HTML Canvas：高级文本效果 **课程概述：** 本课程旨在帮助您精通网页动画技巧，从绘制单个字母到创建多行动画粒子文本。在本次 HTML Canvas 速成课程中，您将从基础知识深入到高级应用，全面掌握在 HTML Canvas 上使用字体和绘制文本的必备知识。我们将共同探索现代前端 Web 开发的可能性，并将文本转化为复杂的动画粒子系统。您将练习纯 JavaScript，不依赖任何框架或库，学习编写创意编码原型和实验，并将其转化为更具模块化的面向对象 JavaScript 语法。 **核心内容：** * **基础入门：** 学习设置 HTML Canvas，使用 `fillText` 和 `strokeText` 方法绘制文本，并掌握所有可用的文本样式工具和技术。 * **高级算法：** 学习如何在 HTML Canvas 上绘制多行居中文本，将其转化为粒子，并创建交互式粒子系统。 * **创意实现：** 学习创建效果的基础版本，应用星座算法实现独特的视觉效果，使用 Canvas 渐变、自定义 Web 字体，并改变粒子形状和物理属性以获得不同的视觉效果和运动。 * **应用广泛：** 此技术也可用于公司 LOGO，即使 LOGO 包含文本、符号和图像的组合。 * **代码实践：** 课程提供完整的源代码，包括作者的一些实验性代码变体。 * **编程风格：** 学习以简单的过程化（逐行）代码库编写创意编码原型和实验，并将其转换为更具模块化的面向对象 JavaScript 语法。 * **互动体验：** 鼓励您在学习过程中进行代码实验。 **先修要求：** * 具备 HTML、CSS 和 JavaScript 的基础知识。 **课程特点：** * 从基础到高级，循序渐进。 * 强调纯 JavaScript 实践，不依赖外部库。 * 鼓励动手实践和创意探索。 * 提供实践代码和实验参考。 * 寓教于乐，享受学习过程。
Become a master of web animation. From drawing a single letter to multiline animated particle text. In this HTML canvas crash course we will go from basics to advanced in a single class. We will cover everything you need to know about using fonts and drawing text on HTML canvas. Let's explore what's possible in modern front-end web development and turn text into complex animated particle systems. Practice vanilla JavaScript with no frameworks and no librariesLearn how to write creative coding prototypes and experiments in a simple procedural (line by line) codebase. Convert those experiments into a more modular object oriented JavaScript syntax.Experiment with codeLearn how to create the base version of the effect with me step by step. Apply constellations algorithm for a completely different visual effect. Learn how to use canvas gradients, custom web fonts and how to change particle shapes and physics to get different visuals and movement. This technique will also work with company LOGOS, even if the logo is a combination of text, symbols and images.Source code includedWith the final lesson you can download the complete source code, as well as some of my experimental variations of the codebase.From basics to advancedBasic knowledge of HTML, CSS and JavaScript is required. The first part of the course will be very beginner friendly, we will learn how to set up an HTML canvas, how to draw text using fillText and strokeText built-in methods and we will cover all available tools and techniques to style it.The second part will cover more advanced algorithms. We will learn how to draw multiline centered text on HTML canvas, how to turn it into particles, how to make those particle systems interactive and much more.Have fun!:)
