今天学习《前端篇》第1章创建第一个小游戏项目的第2课，学完这一课，下一课就可以进入HTML5实战环节了。
学习目标
- 学习画布如何创建画布，如何清空画布，如何绘制矩形；
- 学习如何绘制网像，了解如何实现动画；
- 学习如何进行人机交互；
- 从整体上理解微信小游戏是如何运行的，如何展示界面并与用户进行交互的；
- 学习如何命名变量；
- 了解全局变量，了解小游戏的6种作用域；
- 了解微信小游戏接口的命名风格。
主要知识点/技能点
- 在小游戏中画布是使用 wx.createCanvas接口创建的，第一个被创建的是上屏画布，第二次、第三次及后面第N次创建的画布则是离屏画布，离屏画布上绘制的内容默认不会显示在屏幕上。
- JS变量名称在声明时必须满足这些规则：第一个字符只能使用字母或者下划线；只能使用英文字母、数字、下划线组成；不能使用JS关键词、保留字；不能使用与宿主环境重名的名称。
- 在画布上，可以使用 Canvas.getContext("2d")获取 2D 渲染上下文对象RenderingContext，继而再用 RenderingContext对象的fillRect 方法绘制几何矩形。通过 Canvas.getContext方法，以“2d”为参数得到一个2D上下文绘制对象（RenderingContext）。另一个可以选择的参数是“webgl”，可返回3D上下文绘制对象。
- 在小游戏中，共有6种作用域：区块作用域、函数/方法作用域、类作用域、文件作用域、全局作用域和开放数据域。
- 在浏览器宿主环境中，如果想声明一个全局变量，可以在全局对象 window 上定义。
- 重新设置画布的宽和高可以清空画布，此外调用 RenderingContext.clearRect 方法也可以达到同样目的。
- 如何绘制图像？可以使用接口 wx.createImage 创建图像对象，用这个图像加载网络图片，然后再使用 RenderingContext.drawImage 方法将图像转绘到画布上。
- 在小游戏/小程序开发中，对普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）都有域名检验，对于未在后台配置的域名则不允许访问，但使用Image组件加载网络图片不受域名校验限制。
- 所谓的动画就是静态图片的快速叠加和切换。
- 在HTML5开发中，一般通过定时器和requestAnimationFrame方法实现动画效果。
- 使用 wx.onTouchMove API可以监听触点移动事件，通过 Touch 对象的 screenX、screenY 属性（相当于pageX、pageY 属性），可以获知触点坐标的信息。
- 小游戏提供了这些监听触摸事件的 API：wx.onTouchStart：监听触摸开始；wx.onTouchMove：监听触摸移动；wx.onTouchEnd：监听触摸结束；wx.onTouchCancel：监听触摸取消。
- 在监听到触摸事件后，每个Touch对象都有clientX、clientY 属性，代表触摸的本地坐标，使用该坐标重绘图片，便实现了图片跟随手指移动的效果。
- 在函数内声明的变量就是局部变量，局部变量的作用域局限于函数之内，一般在函数退出后，函数的作用域也就销毁了，局部变量自然也就不能访问了。
- 微信小游戏的API风格：同步接口以Sync结尾、异步调用都有3个相同的回调参数（3个回调参数分别是success、fail和complete）、使用onXxx的形式添加事件监听、兼容HTML5开发习惯、接口成对出现等。
实践疑难点
- 在绘制代码没有生效时，要注意考察画布是不是离屏画布。
- 通过设置width和height属性可以改变 Canvas 对象的宽和高，同时这也会导致 Canvas 内容清空和渲染上下文对象重置，这在绘制时要注意，如果要设置画布尺寸，最好在绘制工作开始之前。
- 在使用网络图片时，要牢记两个问题：一，它是异步的，加载需要时间；二，它的获取是有时间消耗的，要注意缓存复用。
- 在实现动画时，使用requestAnimationFrame创建动画，在效率上优于setInterval和setTimeout。
小结
所谓人机交互，就是获取用户的互动消息，然后及时做出反馈。在GUI软件开发实践中出现的“卡顿”，有一些确实是由于机器的性能不足造成的，但大多数“卡顿”都是由于反馈不及时造成的。当用户做出一个动作后，软件要尽可能快地在渲染周期后给出反馈，这是避免“卡顿”的不二法门。也因为这个原因，在HTML5或小游戏开发中，使用与帧频绑定的requestAnimationFrame函数创建动画，总是比使用setInterval、setTimeout定时器要好很多。
还有一点，小游戏的Canvas API与HTML5 Canvas API具有极高的重合度，两者仅是在极少的细微处有不同。在使用小游戏的Canvas API遇到问题时，都可以将“小游戏”三个字换成“HTML5”尝试进行问题查找。
2022年12月28日
如果有问题，有以下三种方式。
- 除训练营学生外，不要私信问群主问题。群主会在朋友圈分享一些前沿资讯，感兴趣可以关注一下，不感兴趣可以加群后将群主删除。
- 在下方评论区提问。软件问题复杂的话需要提供代码链接，优质问题作者一定会认真回答并精选。
- 在评论区查看其它问答。
感谢理解支持。
