第06步《前端篇》第2章打造游戏界面第1课
2023-06-13 09:16:59 时间
今天学习《前端篇》第2章打造游戏界面的第1课。
学习目标
- 学会在Canvas上绘制文本的方法；
- 学会安装VSCode及需要的插件，例如Live Server；
- 设置VSCode字体、文件自动保存、及Tab Size为2；
- 学习使用HTML标签（例如canvas）；
- 学习使用const关键字，及添加注释；
- 学习更改绘制文本的字体、字号与颜色；
- 了解常用中文字体的英文名称；
- 学习给绘制文本添加文本样式（斜体、粗体）；
- 学习给绘制文本添加渐变色材质；
- 学习在Canvas中剧中绘制文本；
- 理解不能变化的常量在程序中的作用和价值。
主要知识点/技能点
- 将VSCode的font family设置为
"Source Code Pro", Consolas, "Times New Roman", SimSun，第一个“Source Code Pro”字体下载地址为：https://fonts.google.com/specimen/Source+Code+Pro。 - 在画布的绘制上下文对象（ctx，类型为RenderingContext）中有一个fillText 方法，它可以用于绘制文本。
- 在语法描述中，方括号一般代表参数可选。
- HTML是富文本标记语言，这门语言的主要作用在于标签和构建页面结构。每个HTML标记都是成对出现的，它们都具有相同的格式：
<tag>...</tag>，其中tag可以是任何已定义的标签名称，例如html、body、head、canvas等。HTML标签是可以嵌套的，也经常以嵌套的方式出现。 - 在HTML标记代码中，一个很重要的概念是属性，例如id是
<canvas>标签的身份属性，lang是<html>标签的语言属性。 - CSS是一种样式描述语言，作用就是装饰、打扮HTML组件。CSS语法为分两部分，花括号外面是选择器，代表对谁应用样式描述；花括号里面是样式描述代码，每组样式都是成对出现的，冒号（:）前面是样式名，后面是样式值。
- 在JS代码中，等号代表赋值。
- const 与 let 是 ES6 新增的两个重要关键字。let 声明的变量只在 let 所在的代码区块内有效。const 声明的常量，只有在声明时可以赋值，声明之后值就不能改变了。所有我们确定在声明后不会修改它的临时变量，都可以改用const关键字声明为常量。
- 单行注释以两个斜杠（//）开头，放在代码行上方。如果注释内容不多，也可以把注释放在行尾。
- 在 Canvas API中，我们可以使用 fillStyle 属性设置填充颜色，可以使用 font 属性指定文本的字体和字号。font属性是一个字符串复合属性，依次可以设置“font-style font-weight font-size font-family”。
- 字体名称在程序中一般既不能以中文出现，也不能以中文拼音出现，它们有特定的符号名称，例如字体是SimSun、黑体是STHeiti、楷体是KaiTi、微软雅黑是Microsoft Yahei等。
- 可以通过 font 属性中的 font-style、font-weight 分别实现斜体、粗体效果。font-style 有三个选项：normal、italic、oblique。font-weight 的选项共有9个级别（即100~900）或 4个预定义名称（即 normal、bold、bolder和lighter）。
- 使用 createLinearGradient 可以创建线性渐变填充对象（CanvasGradient），这个对象也可以作为fillStyle的合法值。
- 渲染上下文对象的 fillStyle 属性可以接受的值有三类：颜色（Color）、渐变填充对象（CanvasGradient）、填充材质对象（CanvasPattern）。
- addColorStop方法的调用语法为：ctx.addColorStop(stop, color)，其中 stop 是介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置，color 是任意的 CSS颜色值。
- 渲染上下文对象的measureText方法可以返回文本在当前绘制环境中的理论尺寸对象，其中包括宽度。
- measureText方法返回的尺寸信息中并不包含高度信息，文本的高度信息手动计算涉及到许多内容，但对于大多数字体而言，其字符M的宽度值近似等于其高度值，所以M字符的宽度值可以近似当作同字体的高度值使用。
- 渲染上下文对象有一个属性叫做textBaseLine，它有6个有效值：top、hanging、middle、alphabetic、ideographic、bottom，这6个值分别对应字符在上下垂直方向上的6个位置。如果想让文本居中绘制，可以将textBaseLine设置为middle。
- 这里使用常量有两个好处：一，使程序代码解耦，在一个地方修改常量，就可以影响多处；二，常量不可更改，初始化之后，可以放心大胆使用。在能使用常量的地方，就不要使用变量，不用担心常量多了会影响程序性能，一般情况下引用类型的全局常量多了才会影响性能，局部常量尤其是值类型的常量并不会影响性能。
实践疑难点
- font-weight一般建议直接使用绝对粗细的数字值，而不是相对粗细的名称值。在网页的根元素设置的font-weight不同的，所有子元素的相对值都会受到影响。不只是font-weight这一个CSS样式如此，其它CSS样式也有相同的问题，都需要注意。
- 设置font-family样式时，要注意使用真正的英文符号名称，而不是常见的中文名称。
小结
应用层的开发就是这样，要深入学习、了解技术栈中接口的主要功能及具体参数要求，了解边界在哪里，知道哪些能做，哪些不能做，这样在开发功能时才能得心应手，遇到问题时才能想到问题可能出在哪里。
2022年12月29日
如果有问题，在这里有以下三种解决途径。
- 一，除训练营学生外，不要私信问群主问题。群主会在朋友圈分享一些前沿技术资讯，读者如果感兴趣可以关注一下，不感兴趣可以在加群后将群主删除。
- 二，在下方评论区提问。软件问题复杂的话需要提供代码链接，优质问题作者一定会认真回答并精选出来。
- 三，在评论区查看其它人的提问。
感谢理解支持。