今天学习《前端篇》第2章 编写一个简单的HTML5小游戏：打造游戏界面 第4课 绘制挡板，这节课我们开始练习几何绘制，完成一个基本的游戏元素——挡板的绘制。
学习目标
- 在画布上绘制直线；
- 拓展：JS的8个基本数据类型，如何作类型判断
- 给画布添加背景
- 加厚挡板；
- 拓展：JS中的数值类型、布尔类型是如何进行类型转换的
- 给挡板添加圆角、阴影效果
- 使用路径填充和矩形绘制挡板
- 如何使用颜色渐变对象和图像填充材质绘制挡板
- 拓展：什么是区块作用域
- 拓展：了解浮点数字的不精准性，警惕0.1 + 0.2 != 0.3
- 拓展：如何批量声明变量、常量
主要知识点/技能点
- Canvas 绘制中，使用 moveTo、lineTo 可以绘制直线，我们可以沿矩形的四边依次调用lineTo，达到绘制目的。
- moveTo 是方法把路径移动到画布中的指定点，不创建线条，lineTo 是同时创建线条。
- JS的数据类型是隐性的，赋值时是根据右值自动判断的，在声明变量或常量时并不需要显式描述。
- JS共有 8 种基本数据类型。
- 所有基本数据类型都可以用 typeof 进行类型判断，对于object类型，可以使用 instanceof 关键字判断具体的子类型，使用 toString 方法也可以判断；
- 用构造函数判断类型
- 渲染上下文对象的fill 方法可用于填充当前绘制的路径。
- 渲染上下文对象的lineWidth 属性可以设置线条宽度。
- 字符串转化为数值有 4 种转换方法
- 字符串加任何数值（例如"" + 10）都会直接返回字符串
- 在 JS 中，在类型转换方面最常用的是布尔转换。以下6 种情况转化为布尔值，结果都是false。
- 两个感叹号（!!）会强制转化右值为布尔类型，if (!!options.user)比 if (options.user)更加严谨。
- 渲染上下文对象的lineCap 属性，可用于设置线条末端线帽的样式。
- 渲染上下文对象（RenderingContext）的shadowBlur、shadowColor 等属性可以设置阴影效果。
- 我们可以组合使用moveTo 与 lineTo，在挡板的 4 个角坐标依次移动绘制矩形。
- 使用渲染上下文对象的rect方法可以快速创建矩形
- 一个 fillRect方法相当于beginPath、rect和fill三个方法的综合
- 创建一个 LinearGradient 对象，赋值给渲染上下文对象的 fillStyle 属性即可实现线性颜色渐变绘制
- 可以使用 createRadialGradient 方法创建放射状渐变对象，返回结果的对象类型仍然是CanvasGradient
- createPattern 方法即可以创建一个在指定方向有重复特征的木质填充对象
- ES6 中引入了两个新关键字：let 与 const，并且规定花括号可以创建区块作用域。在区块作用域内，let、const 声明的变量、常量，只有在该区块内（即花括号内）有效，在区块外不能访问；同时在区块外已经声明的标识符，在区块内仍然可以再次声明。
- 凡声明变量，一律推荐使用 let；如果变量在声明之后不需要改变，就用 const 关键字声明为常量，放开的权限越小，潜在的软件风险越小
- JS中的数字类型是遵循IEEE 754浮点数标准实现的，这是标准本身存在的问题
- 理想情况下在函数内部或文件顶部声明变量和常量时，至多使用两次 let或const 关键字即可。
实践疑难点
- 在画布绘制中，路径是必须闭合的，但凡带填充的路径绘制，必起始于 beginPath，不然 fill 方法将可能发生填充错误。
- 原因是图片加载是异步的，如果在创建 CanvasPattern 对象时图片还没有加载完成，此时创建的 CanvasPattern 是无效的。因为JS是动态语言，fillStyle属性不知道我们是想传一个错误的颜色字符串，还是想传一个企图正确的CanvasPattern 对象，所以此时程序并不会报错，这个 Bug 很难察觉。
小结
这节课主要实现了右挡板的绘制，学习了属性strokeStyle、lineWidth、lineCap及方法fill、fillRect的使用，练习了放射状颜色渐变对象和材质填充对象的使用，并在实践中了解了JS的基本数据类型及如何作类型判断等语法，还有什么是区域作用域，以及如何批量声明变量常量等。
