实务学堂2020年Web绘画课程，源自纽约大学Web设计与开发课程，是前端工程师的入门课。每个视频几分钟，一路下来，通过一个个好玩的项目，带大家在动手中，走上职业道路。详细课程信息请访问：https://yishuai.github.io/draw
本节讲解如何在网页中加入音频、视频，以及如何与背景混合，形成酷炫效果。
B站视频
英文单词：
本节讲解CSS Grid网页布局，并练习一个包括具有视觉动画和音频的炫酷网站。
作业：FCC 练习
网页版，请下载 代码（2.9MB），按readme.md文件说明在本地练习。
英语单词
示例代码：下载（28KB）
编程真的是什么都能干。本节我们学习如何通过写程序，画图，这就是SVG图。通过这种方法得到的图像，不管你怎么放大，图片永远清晰。厉害吧。我们首先看一个外星人来访的SVG动画作品，感受SVG的魅力，然后介绍SVG的基本形状。
SVG的精髓，在于它的路径（Path）命令。利用这个命令，我们可以完成几乎所有的SVG画图工作。下面就让我们来看看吧。
SVG能够和我们的HTML、CSS完美融合，所以是网页绘图的完美工具。本节我们学习为我们的SVG图片加上动画、特性，我们也将介绍流行的SVG编辑工具和图标网站。最后，我们拟完成一个练习：实现一个小图标。
示例代码：下载（1.3MB）
利用CSS进行各种酷炫2维变换时，可以设置变换的固定点哦。快来学习吧。
Z轴是垂直屏幕的一个轴。有了它，我们的网页就可以变为一个虚拟的三维空间，产生立体效果。这未免太酷了吧。赶紧学习吧。
我们首先来感受一下沿着X、Y、Z这三个轴旋转是什么效果。啊，立体效果出来了哎！赶紧学习！
本节我们学习如何让我们的元素在三维空间上沿任意轴旋转，这样，我们的网站就热闹喽。
要在网页上实现三维的效果，我们需要设置元素的“透视空间”。本节学习如何进行设置。设好后，我们就可以实现各种酷炫的3D效果啦。
本节我们学习如果从0开始，制作一个3D立体，而且会旋转的魔方和莲花。最后的效果实在是太美了。请一定要完成练习。
利用CSS过渡，可以轻松实现各种很棒的动画效果。请一定要掌握哦。
示例代码：下载（1.6MB）
CSS动画能够为你的动画效果提供精确的控制。本节我们系统地学习CSS动画的各种设置细节。快来看看吧。
示例代码：下载（216KB）
CSS动画也可以在SVG中应用，实现各种精确的动画效果。快来学习吧。
示例代码：下载（216KB）
JQuery能够响应用户的各种操作、提供各种动画函数，还可以修改CSS，因此实现过渡和动画的功能。所以它简直太强大了。本节我们练习一个很好玩的例子，里面有很多好玩的SVG图标哦。看看这些图标，你就知道怎么画自己的SVG图标了。好好学习吧。
示例代码：下载（10MB）
本节我们来认识一下Javascript函数。Javascript函数非常灵活。它是我们打开Javascript世界的钥匙。快来学习吧。
Javascript函数非常灵活、高效、强大。它是我们打开Javascript世界的钥匙。请一定好好掌握它！
示例代码：下载（3KB）
本节我们学习Javascript函数定义的各种方法，特别是箭头函数。掌握了这些方法，你就可以写成非常灵活的JS函数。快来学习吧。
本节我们学习一种特殊的函数使用方法：函数生成函数。掌握了它，你的函数定义将更加灵活。快来学习吧。
想知道打字机那样的字符串动画是怎么做的吗？让我们先来复习一下字符串数组的操作吧。
示例代码：下载（10MB）
打字机动画需要动态修改网页元素的内容。我们前面已学过用JQuery来完成这项工作。本节我们学习用更原生的Javascript函数来实现这一功能。因此，我们先来深入浏览器的内部，学习它是如何存储网页的，这就是DOM。让我们来认识一下它吧。
本节我们将用定时器，实现两个很酷的动画。一个能变幻背景，用打字机动画的方式，欢迎你；一个能陪伴你呼气、吸气，放松心情。让我们来学习吧。
设置完定时器后，你还可以取消它哦。学会如何清除定时器后，我们可以更灵活地控制定时器。快来看看吧。
能不能设置会重复发生的定时器呢？当然可以。本节我们就学习如何设置能够重复发生的定时器。
前面学过的GetElementByID函数可以在网页中找到特定ID的元素。本节我们学习更多查找网页元素的方法，如通过CSS类找到元素。利用这些方法，我们就能快速找到各种网页元素。我们还将接触特别有趣的函数式编程。快来看看吧。
示例代码：下载（3.2MB）
本节学习用addEventListener函数为网页元素添加事件侦听器。添加了事件侦听器，网页就可以响应用户的各种动作，变成响应式网页啦。快来学习吧。
在利用DOM函数完成一个好玩的写作网站之前，我们先学习正则表达式。正则表达式能够在字符串中搜索我们想找的内容，是一个非常强大的工具。Enjoy！
基于前面学过的DOM函数、定时器函数、正则表达式，本节我们一起来完成一个非常实用的互动写作网站，它可以显示时间、切换暗模式、统计字数。快快开始吧。注意初始代码在定时器的压缩包里。
DOM树独特的形式，让我们能够在上面四处移动，比如找到一个节点的父节点、兄弟节点、和子节点。通过在DOM树上移动，我们对网页的处理和控制就能够非常灵活。快来看看吧。
本节通过一个实例，介绍如何用递归的方法，遍历DOM树。通过这个方法，我们能用很少的代码，就遍历整个网页结构，找到想要的东西，实在太方便了。快来看看吧。
本节学习如何用Javascript创建、移动、替换、删除DOM节点。掌握了这些方法，就可以像玩积木似地，非常灵活地制作各种网络应用啦。快来学习吧。
通过设置CSS类，我们可以用Javascript灵活地控制网页上元素的显示风格，实现各种动态效果。本节通过一个图片网站的例子，学习CSS类、事件Target属性的用法，让你的网页编程如虎添翼。快来看看吧。
通过切换元素CSS列表，可以很方便地实现元素的显示和隐藏，和各种CSS效果的切换。让我们用一个火箭介绍网站作例子，来学习一下吧。
学习了这么多DOM知识，想不想体验一下完全用编程来实现一个表格网页呢？现代Web应用就是用这种方式实现的：你可以用Javascript实现所有的东西。来感觉一下吧。Enjoy！
本节开始学习前端编程的各种事件。本节介绍我们将学习的鼠标、键盘、用户交互、滚动等各种事件的基本概念。通过事件，我们就可以捕捉用户的各种动作，为他提供服务。这就是用户交互的秘密。快来学习吧。
示例代码：下载（1.2MB）
事件发生在网页元素上。事件发生时，事件响应函数会收到一个事件参数，里面存着各种宝贵的信息，比如事件发生在哪个元素上。根据这个信息，我们就能知道”用户点击的是哪个按钮“这种信息，因此做出相应的处理。这是非常有用的功能哦。快来学习吧。
鼠标事件简单吗？不简单呢！本节介绍鼠标的各种事件，包括：点击、按下、弹起、双击、移动、移入、移走，还可以发现用户按的是鼠标的哪个按钮。厉害吧？赶快学习吧。
利用鼠标位置，可以实现各种酷炫的用户交互效果，比如在用户鼠标点击的地方，放上一只小猫咪。可爱吧？！本节学习如何捕捉用户点击鼠标时，鼠标的位置。快来看看吧。
想不想随着用户鼠标的移动，实现各种动态的效果呢？比如让网页的颜色像彩虹🌈那样变色。没问题。本节就学习如何响应用户鼠标移动，实现这一效果。快来学习吧。
用户打开网页、关闭网页、放大缩小窗口时，我们可以捕捉这些事件，进行响应吗？没问题。快来看看吧。
键盘快捷键能够极大地提高用户工作的效率，比如按下v键，背景就变成紫色。天黑了，想打开暗模式，怎么办呢？可以按下d键。这是怎么实现的呢？可以用键盘事件很方便地实现。快来看看吧。
表单供用户输入文字、选择选项，比如调查问卷。本节学习表单的各种事件，包括输入、选择、离开。基于这些事件，我们可以观察用户的动作，及时提供提示或帮助。这是非常重要的哦。快来学习吧。
本节介绍事件管理的高级技巧，包括：清除已登记的事件侦听器、阻止事件的默认行为。我们将练习一个好玩的吹气球游戏。你可以用键盘吹这个气球，但它有可能会爆炸哦。快来看看吧。
鼠标移动、用户输入这些事件有可能会像机关枪似的，连续不断地发出来。这时，如果我们对每一个事件都处理的话，电脑就可能忙不过来了，用户就会觉得电脑变慢了，不好用了。这可不好哦。怎么办呢？定时器可以来帮忙。本节学习如何用定时器来优化这种连续事件的处理。这个技巧非常有用哦。快来看看吧。
本节开阔视野，学习几个有关事件的知识，包括：DOM树操作事件、触摸屏事件、页面滚动事件，事件传播和阻止。这些内容非常有用，快来看看吧。
利用Javascript动画API，可以实现灵活的动画控制，比如让滑板运动员倒着滑。本节学习这些API。掌握了它们，你能用更简洁的代码实现更强大的动画功能。编着编着你可能会想：这不是编游戏吗？恭喜你，答对了。
示例代码：下载（200KB）
CSS提供了强大的动画功能。本节学习如何用Javascript来设置这些CSS属性，实现各种动画效果。快来看看吧。
据说真正的高手，都用“请求动画帧”来实现动画。为什么呢？因为它仅在屏幕刷新的时候才更新图像，因此既能产生高质量动画，又不会浪费电脑的计算资源和电池能量。想不想学习它呢？当然，让我们来看看吧。
利用三角函数，就是Sin和Cos，能设置完美的椭圆运动轨迹。这无疑是一个专业前端工程师需要了解的。快来看看吧。
Canvas可能是在网页上实现各种视觉效果的终极解决方案：动画、游戏、视频特效、...，让我们来学习它。
示例代码：下载（9.3MB）
要在浏览器中显示专业的3D动画，你需要学习WebGL。它能够利用你的GPU，进行硬件加速，从而获得流畅的各种视觉效果。学习了这一节，你就可以做各种3D的动画和游戏啦。感觉学习吧。
示例代码：下载（51.5MB）