今天学习《前端篇》第2章 编写一个简单的HTML5小游戏：打造游戏界面 第6课 绘制分界线，这节课复习一下之前已经练习过的 lineTo、moveTo 方法，在实践中学习 JS 语言在逻辑控制语句、函数、作用域、闭包等方面的基础知识和技能。
学习目标
- 分别通过lineTo和渐变色绘制分界线
- 学习CSS 颜色值有哪些格式
- 使用函数绘制间隔效果
- 学习如何定义和使用函数
- 使用循环绘制分界线
- 拓展：使用比较运算符、if控制语句和算术运算符
- 拓展：JS的5种循环控制语句
- 拓展：如何理解JS的作用域链与闭包
- 拓展：如何使用集合对象 Map 与 Set
主要知识点/技能点
- 绘制的先后顺序，决定了画布中对象的上下遮挡关系。
- 其实 CanvasGradient 对象不仅可以应用于填充属性 fillStyle，还可以应用于线条属性 strokeStyle。
- #ffffff00是一个十六进制的 rgba 颜色值，最后的00代表透明。
- RGB 颜色：格式为 RGB（红，绿，蓝），每个颜色值在 0~255 之间。
- RGBA 颜色：格式为 RGBA（红，绿，蓝，Alpha），与 RGB 类似，只是多了一个 Alpha 通道，Alpha 的取值范围是 0.0~1.0。
- 函数是程序中可以重复使用的代码块。函数以关键字 function 声明，每个函数可以有 0 个、1个或多个参数，函数可以有返回值，也可以不返回，参数和返回值的类型都不需要在函数体中声明。
- 在调用函数时，可以向其传值，这些值被称为实参。
- 函数要尽量保持独立性，函数的运行最好不依赖外部任何变量，所有函数执行时需要用到的数据全部通过参数传递进来。
- JS 中有两种定义函数的方式：函数声明和函数表达式。
- 在非箭头函数中，arguments 表示函数实参，arguments.callee 表示函数本身。
- arguments 作为一个实参类数组对象，同时也是 object 类型，它有一个 callee 属性，通过 arguments.callee 可以访问函数本身。
- JS 函数即使不声明形参，也可以向它传递参数，这时候在函数内部要访问实参，就需要发挥 arguments 的作用了。
- 如果开发者不确定参数个数，或者函数需要传递不确定数目的参数，在 ES6 中可以声明 rest 参数。
- 在 JS 语言内，while 循环会在指定条件为真时循环执行代码块。
- for 循环是 JS 中最常使用的循环。
- 在 JS 中，主要有 7 种比较运算符，主要有 以下7 种算术运算符
- 如果花括号内代码只有一句，可以省略花括号。
- 在 JS 中，包括 for、while 、do while 、for in 和for of 共5 种循环控制语句。
- JS 作用域是可以嵌套的，从而形成一个作用域链条。变量可以沿着作用域链向上追溯，即子作用域可以访问父作用域，继而向上还可以访问祖作用域，直到全局作用域为止。
- 闭包等于一个函数加上本来不属于这个函数，但这个函数又能调用的变量或常量。如果一个函数可以访问另一个作用域中的变量，那么前者可能就是一个闭包。
- Set 是一组 key 的集合，不存储 value，只存储key，并且 key 不能重复。
- Map 是 ES6 内置的一组键值对数据结构，Map优势在于具有极快的查询速度。
实践疑难点
- 要注意闭包捕获的变量的值。
小结
这节课主要实现了对分界线的绘制，在绘制实践中练习了 JS 语言的逻辑控制语句，学习了函数、闭包和作用域链等相关概念，这些都是 JS 语言的基础概念，特别是闭包与作用域链，必须多加练习，将它们彻底搞明白。
