今天学习《前端篇》第2章打造游戏界面的第2课，绘制挡板。

学习目标

• 学习如何在Canvas上绘制直线；
• 学习JS语言的8个基本类型；
• 学习色块背景的绘制；
• 学习数值类型和布尔类型的类型转换；
• 学习如何加厚挡板，如何添加圆角、阴影效果；
• 学习万能的路径填充绘制；
• 学习使用颜色渐变对象和图像填充材质绘制挡板；
• 了解什么是区域作用域；
• 了解小数精准度的有限性，理解为什么0.1+0.2不等于0.3；
• 学习如何批量声明变量、常量的小技巧。

主要知识点/技能点

• 在 Canvas 绘制中，使用 moveTo、lineTo 可以绘制直线，我们可以沿矩形的四边依次调用lineTo，达到绘制目的。moveTo 是方法把路径移动到画布中的指定点，不创建线条，lineTo 是同时创建线条。
• JS共有 8 种基本数据类型：null、undefined、boolean、number、bigint、string、symbol、object。
• 如何判断类型？所有基本数据类型都可以用 typeof 进行类型判断，对于object类型，可以使用 instanceof 关键字判断具体的子类型，还可以使用 toString 方法判断。
• 渲染上下文对象的lineWidth 属性可以设置线条宽度。注意线条的宽度是骑线绘制。
• 字符串转为数值有4个方法，以字符串“10”为例：Number("10")、parseFloat("10px")或parseInt("10px")、隐式自动转换（赋值给lineWidth属性）、0 + "10"。
• 字符串加任何数值（例如"" + 10）都会直接返回字符串。
• 6种常见的其他值转化为布尔值的情况：空字符串''、整型数字0、浮点型0.0、特殊值null、非数字NaN、未定义值undefined。
• 在条件语句中，两个感叹号（!!）会将其他值强制转化右值为布尔类型。
• 渲染上下文对象的lineCap 属性，可用于设置线条末端线帽的样式。
• 渲染上下文对象（RenderingContext）的shadowBlur、shadowColor 等属性可以设置阴影效果。
• 使用渲染上下文对象的rect方法可以快速创建矩形。一个 fillRect方法相当于beginPath、rect和fill三个方法的综合。
• 创建一个 LinearGradient 对象，赋值给渲染上下文对象的 fillStyle 属性即可实现线性颜色渐变绘制。
• 可以使用 createRadialGradient 方法创建放射状渐变对象，返回结果的对象类型仍然是CanvasGradient，将结果赋值给渲染上下文对象的fillStyle，便是放射状渐变。
• createPattern 方法即可以创建一个在指定方向有重复特征的木质填充对象，木质填充对象才可以给渲染上下文对象的fillStyle属性赋值，从而实现材质填充。
• ES6 中引入了两个新关键字：let 与 const，并且规定花括号可以创建区块作用域。在区块作用域内，let、const 声明的变量、常量，只有在该区块内（即花括号内）有效，在区块外不能访问；同时在区块外已经声明的标识符，在区块内仍然可以再次声明。
• 理想情况下在函数内部或文件顶部声明变量和常量时，至多使用两次 let或const 关键字即可。

实践疑难点

• 渲染上下文对象的fill方法可用于填充当前绘制的路径，在使用路径法绘制色块时，最后一定要记得调用fill。
• 在画布绘制中，路径是必须闭合的，但凡带填充的路径绘制，必起始于 beginPath，不然 fill 方法将可能发生填充错误。
• 在使用材质填充时要注意，由说图片加载是异步的，在创建 CanvasPattern 对象时图片还没有加载完成，此时创建的 CanvasPattern 是无效的。又因为JS是动态语言，fillStyle属性不知道我们是想传一个错误的颜色字符串，还是想传一个企图正确的CanvasPattern 对象，所以此时程序也不会报错，这样的Bug很难察觉，它是由JS这门语言的弱类型、动态性决定的。
• 在声明变量的时候，一律推荐使用 let；如果变量在声明之后不需要改变，就用 const 关键字声明为常量，放开的权限越小，潜在的软件风险越小。
• JS中的数字类型是遵循IEEE 754浮点数标准实现的，0.1+0.2不等于0.3这是标准本身存在的问题，并不是JS语言存在的问题。在JS中处理小数时要特别注意精准度问题。

小结

JS中的变量实际是有类型的，但缺少强制和验证，在声明时不强制声明类型，在传值时也不强制验证类型，因此对于fillStyle的这样的属性，才既可以接受字符串类型，还可以接受LinearGradient、RadialGradient和CanvasPattern类型，这在其他语言中是很少见的，这可以说是JS的优点，但更多是它的缺点，在使用要特别注意。

2022年12月30日

如果有问题，在这里有以下三种解决途径。

• ?‍?‍? 除训练营学生外，不要私信问群主问题。群主会在朋友圈分享一些前沿技术资讯，读者如果感兴趣可以关注一下，不感兴趣可以在加群后将群主删除。
• ? 在下方评论区提问。软件问题复杂的话需要提供代码链接，优质问题作者一定会认真回答并精选出来。
• ☕️ 在评论区查看其它人的提问。

感谢理解与支持。