今天学习《前端篇》第2章 编写一个简单的HTML5小游戏：打造游戏界面 第3课 绘制游戏标题，本节课从绘制一个文本开始，最终实现将游戏标题“挡板小游戏”展示在屏幕正中。
学习目标
- 安装与配置Visual Studio Code
- 学习使用HTML标记
- 拓展：如何使用const 关键字
- 拓展：如何给代码添加注释
- 如何改变字体、字号和颜色
- 拓展：在font-family中要使用中文字体
- 如何给文本添加文本样式（斜体、粗体）
- 如何在绘制文本中使用渐变色
- 如何让文本居中绘制
- 拓展：为什么要在代码中使用常量
主要知识点/技能点
- Visual Studio Code（以下简称VSCode）是编写JS最舒适的工具，没有之一，该开发工具可以从微软官网（code.visualstudio.com/）下载、安装。
- 编程初学者极易犯的一类错误是中英文标点不分，代码中只能使用英文标点，所有中文单引号、双引号如果混进代码中都将引发错误。
- 在画布的绘制上下文对象（ctx，类型为RenderingContext）中有一个fillText 方法，它可以用于绘制文本。
- HTML是富文本标记语言，这门语言的主要作用在于标签和构建页面结构。每个HTML标记都是成对出现的，它们都具有相同的格式：...，其中tag可以是任何已定义的标签名称，例如html、body、head、canvas等。
- 在HTML标记代码中，一个很重要的概念是属性。
- CSS是一种样式描述语言，作用就是装饰、打扮HTML组件。CSS语法为分两部分，花括号外面是选择器，代表对谁应用样式描述，例如第9行canvas是一个元素选择器，代表对所有canvas元素应用样式；花括号里面是样式描述代码，每组样式都是成对出现的，冒号（:）前面是样式名，后面是样式值。
- 等号代表赋值。
- const 与 let 是 ES6 新增的两个重要关键字。let 声明的变量只在 let 所在的代码区块内有效。const 声明的常量，只有在声明时可以赋值，声明之后值就不能改变了。
- 所有我们确定在声明后不会修改它的临时变量，都可以改用const关键字声明为常量。
- 单行注释以两个斜杠（//）开头，放在代码行上方。如果注释内容不多，也可以把注释放在行尾。
- 在 Canvas API中，我们可以使用 fillStyle 属性设置填充颜色，可以使用 font 属性指定文本的字体和字号。
- 渲染上下文对象的font 属性中的 font-family，与 CSS中使用的 font-family，它们的值都必须是英文，这与我们平常在 Word 软件里看到的字体名称，例如如宋体、黑体是不一样的。
- 可以通过 font 属性中的 font-style、font-weight 分别实现斜体、粗体效果。
- font-weight 的选项共有9个级别（即100~900）或 4个预定义名称（即 normal、bold、bolder和lighter）。
- 使用 createLinearGradient 可以创建线性渐变填充对象（CanvasGradient），这个对象也可以作为fillStyle的合法值。
- 得益于 JS 是一门弱类型动态语言，所以 fillStyle 属性既可以设置为字符串，又可以设置为对象。
- addColorStop方法的调用语法为：ctx.addColorStop(stop, color)，其中 stop 是介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置，color 是任意的 CSS颜色值。
- 渲染上下文对象的measureText方法，这个方法可以返回一个文本在当前绘制环境中的理论尺寸对象，其中包括宽度。
- CSS有一个text-align样式，一般设置其值为center，可以将文本居中。
- measureText方法返回的尺寸信息中并不包含高度信息，文本的高度信息手动计算涉及到许多内容，但对于大多数字体而言，其字符M的宽度值近似等于其高度值。
- 渲染上下文对象有一个属性叫做textBaseLine，它有6个有效值。
- 在能使用常量的地方，就不要使用变量，不用担心常量多了会影响程序性能，一般情况下引用类型的全局常量多了才会影响性能，局部常量尤其是值类型的常量并不会影响性能。
实践疑难点
- 如果代码中指定的字重不存在，比它小的字重将会被选用，这就造成有时候 800 与 600 的字重效果是一样的结果。
小结
这节课我们主要学习了如何绘制文本，及如何控制文本的颜色、大小、斜体、粗细等样式。
