canvas quiz 如何看代码

你敢相信吗？网页上所有的动画、游戏，甚至 vr 和三 d 效果都是用堪瓦斯来实现的。我这套视频有一个小小的野心，就是让你彻底学会堪瓦斯。好，我们先动手实战。我们想要在网页上画画，就得有画板和画笔， 卡瓦斯标签就是我们的画板。现在我们要从画板上拿到画笔。现在你可以在画板的 s 坐标为一百像素外坐标为五十像素的地方画一个方块，方块的大小是一百乘一百像素。 好，打开浏览器看一下。恭喜你，现在你已经可以使用堪袜子画出东西了。堪袜子还可以画一个圆形，甚至圆弧，还有直线曲线。 以上代码在我博客里可以找到。咱们第一课是为了让你体验一下看袜子到底是怎么用的，你只要记住画板和画笔这两个概念即可。之后的视频我会详细讲解看袜子的每一个 api。

大家好，前段时间呢，我把我的这个主页给他更新了一下，以前的那个代码案例啊，全部都放在这里面了。这一次呢想给大家分享的一个是我写了一个 cameras 项目，我管他叫灵动 cameras， 放在这里了，大家如果想看的话也可以进我的主页点这里进， 效果呢是长这样子的，是一个 canvas 的一个曲线图，然后里面有填充的渐变色，然后右边呢也可以对他进行调整，比如说我们把这个速度调快，速度调慢，然后线宽， 然后密度都是可以动态调整的。那这个项目用来入门是一个非常好的一个项目，你可以了解 carries 它最基础的应用，以及我们市面上做可视化的基础原理大致都是什么，你总会知道。好了，我们现在开始，我们首先拆解一下 这个里面它包含那些元素，左边是 cameras 区域，右边是控制区域，左边的 cameras 里面又包含哪些呢？线条，然后下面的填充还有动画。首先我们拆解线条呢，它就变成了这样，这样的一个线条它是怎么做的呢？首先我们知道 cameras 里面 如果要画这种图的话，有几种方法呢？最常见的 lie to 对不对？然后还有 arc， 然后还有呢就是它的贝塞尔曲线，贝塞尔曲线分三次贝塞尔曲线和二次贝塞尔曲线， 那我们这里呢，用的就是三次 best 曲线。首先我们说一下他们之间的优缺点啊， like to， 如果你用 like to 的话，我们都知道 like to 是在 cameras 上面画一个指定一个点，然后再指定另外一个点， 相当于你画一条直线一样，但我们刚才那是曲线，画出来会有什么结果呢？我们知道如果是这样画的话没有什么问题，但是就算你画的很细致， 他也会有锯齿的感觉，那么第一条就不能用，那么第二条我们用 arx 方式， arx 方式倒是非常简洁，但是网上出现了一种 ax 方式，是指定他的点位，就是他是由很多很多个点组成的，就是有很多很多个点，从这得得得 这样，那这样画出来结果就会导致如果你的线宽画的很小很小的话，你就能清晰的看出他是由很多很多个小点组成的。这种情况在某一些特殊场景下，可能不太符合我们的要求，我们就选用了贝塞尔取件，那么这里二次贝塞尔取件和三次贝塞尔取件他其实都是可以用的。这里我为了方便， 我就用了一个三次贝斯二曲线。三次贝斯二曲线和二次的区别在于二次啊，他只能指定一个点，就是我们可以看到这个图上面 p 零是开始的位置，我们需要指定，比如说我们现在先说这个二次，二次的话，我们需要指定两个点，首先是需要指定一个 p 一点，再指定一个 p 二点，那这样他画出来的就是这么样一个曲线，如果你的 p 一拉的越高，越往上拉，那这个曲线是不是就越往上升， 就形成了所谓的波高，就是有这里的高度。二次是用了一个点，那三次他是用两个点，你可以指定两个点的位置。那么举个例子， 比如说这里是三个点， p 一、 p 二、 p 三，那 p 一已经在这了，它这里已经是曲线，那如果我把 p 二拉到这个下面， 这个曲线是不是也跟着下来？然后如果我把 p 三往上拉，他就又会回去，就能够形成像我们这样的一个曲线。好了，这个曲线画好了，那怎么画一整副的曲线呢？这里我们就需要把这个里面的注视解开 给大家看一下，这里就画成了一整副的曲线，对不对？那这里是怎么画的呢？这里原理啊，是这里啊有个 drum map 专卖部，他做了一个循环地规，那地规干嘛呢？地规一直从这生成这一条线，如果这条线呢，超过了这个 w 位置，这个 w w 就是这个整副 canvas 的宽度，如果超过了这个呢？那就把这幅 canvas 先保存下来，那这样循环生成呢？就能够生成这样一个曲线了。

前两天有朋友问我个问题，需要将页面 div 元素以图片的形式保存下来，怎么实现？我就给他推荐了一个插件叫 html twocoms。 先来看一下效果，鼠标右键的时候可以将这个 div 元素以图片的形式另存。先来看一下基础代码， 这是一个红色的正方形 div 元素，现在在浏览器中，右键这个元素效果是这样的，他会打开浏览器默认的右键弹窗。接下来打开 bootsamdang 官网，搜索 html 图 cos 插件，输入 stml tocons， 选择 html twocross 的 gs 或者 stml twocrossmandgs， 点击复制此刻的标签，回到代码中，将复制的内容粘贴，这样就引入了 html twocross 插件，然后使用这个插件 将 dia 元素作为参数传给 html 图 cons 方法，方法返回 promiss， 这里使用赞来接收方法返回的 cons 元素，然后删除页面原来的 div 元素， 并将 cross 元素添加到页面。这个时候页面看到的红色方块其实就已经是 cross 元素了， 而看似元素是支持右键以图片的形式另存。如果你想把整个页面作为图片另存，把页面的包帝传给 html 图刊文词方法就可以了，你学会了吗？

前两节详细介绍了本地玉兰还有这个选举框的这个操作，这一节主要来说一下生成这个图片的逻辑，这一节主要说的是像素级的操作，我觉得这也是 cos 比较牛的一个点。我们来看代码，我们给这个裁线按钮设置一个点击效果， 就是这个，然后这里我们要先把图片在康尔斯上绘制一遍，然后再进行裁切。这里你可能会有疑问，为什么要把图片绘制一下，而不是直接进行裁切？因为我们裁切的这张图并不是原图， 我这张原图是一九八零乘以一千多，是非常大的一张图，我们把它按比例缩小在了这样的一个区域，然后你裁切的这个区域是缩小之后的这个图的区域，所以我们这里用 cos 首先要对原始图进行一个缩小，然后把缩小之后的这个图，我们再进行一个相塑级的裁切。 所以这里我们对 ctrls 这个画布进行一个设置，这里呢设置的这个这个图片的宽高呢？其实就是这里就是图片的这个缩小之后的宽高，我们把这个图片绘制到这个 ctrls 之后，通过这个方法拿到这个图片的所有像素，其实拿像素的这个操作就是一个裁切操作， 为什么呢？因为我们可以拿部分像素，这个部分像素就是根据我们裁切的这个区域的坐标还有尺寸来进行获取， 也就相当于其实我们就是获取的这部分的像素。然后我们在新的这个 cometers 里拿到这个图片的对他 uil， 这就是一个财气候的图片，你又可以拿它去进行渲染，也可以把它去保存到服务器。

各位同学，在前段开发当中，我相信呢，或多或少都遇到过图像不清晰的问题，那么接下来呢，我将花几分钟的时间让你彻底的解决这个问题。你首先要知道一个图像， 它分为两种尺寸，第一种尺寸呢叫做自然尺寸，我们看一下这张图片啊，自然尺寸呢，可以通过 nature with 和 nature height 来得到，我们也把它称之为原始尺寸，表示这张图片画出来的时候，它本身自带的尺寸。 比方说你拍照，你调整相机的分辨率，那么拍出来是多少，那就是多少。那么这张图片的原始尺寸呢，是两百乘两百。还有一种尺寸叫做图像的样式尺寸，就是去设置这个图片的 style， 这里就是样式尺寸， 他表示展现在页面上的尺寸。打比方说吧，我把这尺寸要调大一点，调成一千二，是不是变模糊了？ 那么是不是说只要保证图像的样式尺寸跟原始尺寸是一样的，那么这个图片就清晰了呢？我们来试一下呗，我们把它调回两百，让他跟原始尺寸保持一致。接下来看好了，我放大页面糊了没？糊了， 他为啥糊了呢？哎，是不是说现在样式尺寸跟原式尺寸不一样了呢？那我们来验证一下呗，现在的样式尺寸是不还是两百乘两百，只不过是放大之后的两百乘两百。然后呢，原式尺寸图片是肯定不会变的，还是两百乘两百，我们保持一致了呀，为什么还是模糊呢？ 那就是因为我们少考虑了一个变量，就是缩放倍率，在浏览器里边可以通过 window 对象里边的一个全局属性叫 device， p 个小 raq 来得到。目前整个界面的缩放倍率目前是十。那么接下来我们就要学 寻找这个样式尺寸和这个原石尺寸以及这个缩放倍率之间应该保持一种什么样的关系，他才能够让这个图片保持清晰。 我们来看一张图，我这里呢做了一个标注啊，这个颜色表示原始尺寸，这个颜色呢表示样式尺寸，在缩放倍率为一的时候，就是没有缩放的时候，你只要保证原始尺寸和样式尺寸一致，那么这个图片一定是清晰的， 对吧？这个不用去做任何的数学计算，你感官上都能感知到，是这么个道理，但是当我调整了缩放倍率，比方说放大了三倍， 目前的原式尺寸和样式尺寸还是一致的，但是他又变得模糊了。那么同学们感觉一下，不要理性的思考，你就感觉我现在要怎么样做才能让这个图片保持清晰呢？是不是当页面放大的时候，图片的尺寸缩小又缩回 到这个样子，不就清晰了吗？这感觉就感觉的出来，是吧？那么现在就剩下两个问题了，缩放哪个尺寸？原始尺寸你不能动，你图像的原始尺寸是拍照拍出来的，你怎么动呢？那只能改变央视尺寸了，那央视尺寸说多少呢？你这里放大了三倍，是不是 就缩小三倍？于是呢，我们就需要把这个样式尺寸啊缩小三倍，那就是六十六点六乘以六十六点六，那么这样子呢，图片就清晰了啊，除不尽就除不尽呗。那么我们仔细观察一下样式尺寸， 缩放倍率和原始尺寸之间要保持一个什么样的关系？这个图片才是清晰的呢？是不是不难看出，有这么一个等式，就是原始尺寸等于样式尺寸乘以缩放倍率，你只要能够保持这个等式， 成立图像无论如何都是清晰的。反之，这等式一旦不成立，图像一定是模糊的，无非是模糊多少的问题。 在这个等式的逻辑下，其实我们保持清晰度有多种方案，比方说我们的缩放倍率是固定的，就是放大了三倍，那么我们怎么样保持图像清晰呢？我们刚才呢，是保持原始尺寸不变，对吧？把样式尺寸降低三倍。 其实还有一种做法就是保持样式尺寸不变，把原始尺寸提升三倍，是不是也可以？那怎么提升呢？那就要换图了，换一张六百乘六百的小鸟图，那么在这个模式下，他就是清晰的， 懂这意思吗？那么这一点呢，不仅仅是在图像这里成立，在 campus 里边也成立，为啥呀？因为 campus 啊，它也是图片，比方这里有个 campus 啊啊，这里在样式里面设置的尺寸是样式尺寸。然后呢，通过初始化的 campus 在这里设置的尺寸呢，是 campus 这个图像的原始尺寸，我们展开一个画布，两百乘两百在上面作画，然后呢，下边我们在 campus 上呢画了一个半径为八十的圆，好运行出来看一下啊。首先我们要认识 campus， 它画出来的就是图像，你点击右键，你看图片另存为，那么它现在为什么是不清晰的呢？我们来看一下，目前的放大倍率只有十倍， 那么根据刚才的等式倍率呢，是十倍，样式尺寸呢是两百，原式尺寸呢也是两百，你说这个等式怎么成立？成立不了是吧？那他一定是模糊的，也就说我要让他不模糊的话，非常简单，我只要让这个等式成立就可以了，你要么呢去改动样式尺寸， 要么呢去改动圆式尺寸。那么这里呢，我们去改动他的圆式尺寸试一下，那改成多少呢？是不是改成两千好，于是呢，把它改成两千试一下呢？哎，你看这个圆是不是就变得无比的清晰了？当然呢，你现在呢是把 写死的，最好是怎么写呢？就是样式尺寸乘以这个属性的值，这样子呢，就能适配到不同的缩放情况，你看这样子没问题，然后这样刷新，这也没问题。 那你说我要在放大缩小的时候，这个圆圈跟着放大缩小，同时还要清晰啊，我这里一刷新，你看这变小了， 那这个该怎么做呢？那其实一样的啊，你把这些半径啊，画线的宽度啊，都去按照放大倍率来进行缩放，那就完事了，你看缩小啊，刷新，你看再缩小，刷新，你看里边的所有内容，跟着放大缩小了，道理就是这个道理， 你只要记住这个公式就没有问题。那么最后呢，我们来看一下我们上节课的例子，你看在一个很高的放大倍率下，这个图像已经完全不能看了，非常的模糊，那么怎么办？首先我们给这个 camos 呢一个样式 尺寸，我这里使用百分比啊，乘满四口，再给他一个原石尺寸，刚才唯一看到了原石尺寸等于样式尺寸乘以缩放倍率，把这个代码给他加上，你看这是宽度的百分之百，是吧？这是高度的百分之百， 然后乘以缩放倍比，保存开一下是不是没问题了，就非常清晰了，然后我们调整一下这个最大距离调到五百。哎，这感觉出来了，是吧？因为我们这个效果呢，是不需要里边的内容跟随着放大缩小的，是固定的。所以说呢，这里边的原点尺寸啊，线的尺寸啊，我们不用去更改。 于是呢，现在我们不仅解决了上节课遗留的清晰度的问题，同时解决了一切图像的清晰度问题。

errors 呢，是 h 五中新增的一个标签啊，干拿做什么的呢？哎，是用于提供一个画布的啊。用于提供一个画布的，什么叫画布啊？就是一个画板，咱们可以在上面画画，哎，画一个山是吧，啊，一个房子， 你画有点丑是吧，哎，大致说这样的是吧，就是在上面画画，哎，在上面去画画，哎，只要画布， 呃，那么他的标准属性有两个啊，这个元素的属性有两个，一个是宽度，一个是高度，哎，跟图片一样，我们可以给这个 comis 设置宽度和高度， 嗯，然后呢，我们说它的 id 啊， class 啊，这些跟咱们普通的元素是一样的，都是通用的，古通用的标准属性，哎，给哪个元素都可以用，哎，然后呢，在加 skill 中呢，我们俩可以通过 啊它的 get contact 二 d 方法来获取画布的上下纹。什么叫上下纹呢？就说你想画这个，你想往这个画布上去画画，你是不是得获取这个画布啊，怎么获取呢？通过 get contact 二 d 这个方法来获取这个画布， 那么画布上下纹啊，为我们提供了大量的 a p i 啊，大量的绘制方法， 然后呢， carros 呢，用于呈现图形的，那么自带了一个坐标器，默认呢是元素的左上角这个点， 哎，然后是一个倒指的数学坐标器，跟浏览器一样，也就是说呢，他的这个坐标器啊，哎，我们说数学坐标器，是不是向右为正 s 方向是吧，你要向上为正，歪方向，那么什么叫倒指的呢？哎，就是我们的浏览器，哎，网页是向右 s 方向为正，向下 y 方向为正，比如说，你看咱们 live 的属性，哎，是不是往右去为正，往左去为负啊？比如说咱们的 muggin level 的属性也是往右去为正，往左去为负， 而我们的 top 以及 man 跟 top 是不是都是往下去为正，往上去为负啊？哎，是一个倒指的，那么 cameras 也是这样的一个倒指的，哎，从咱们画布的左上角这一点为对外系的起点，往下为正 y 方向，往右为正 s 方向， 嗯，我们一起来看一下啊。嗯，我们来看一下它有哪些 a p i 啊？咱们先看一下咱们的 cameras 啊。嗯，好了，首先呢，咱们去新建一个文件， 嗯，到零几了？零六了是吧？哎，零六 camera and。 好了，那么这个 cameras 呢？不需要服务器了，咱们把服务器关闭掉，然后呢注意看啊，然后呢注意看。我们俩在这里面去新建了一个零六点 cameras， 我们在里面去创建一个页面 好了，然后呢这里边有一个 camera， 然后呢注意，我们说可以给他一个 id 啊， a p p 啊，对吧？还可以给他一个类啊 demo， 这些都可以啊，我们还可以给他一个宽度，比如说是一个六百像素的， 然后可以给他一个高度啊，比如是一个四百像素，哎，然后呢，咱们 也可以通过类和 id 选择器给它设置样式说明，说白了它跟普通元素是一样的啊，是一样的。呃，比如说咱们通过这个点 demo， 哎，给他去写一个样式啊，比如给他一个 maggot， 嗯，呃，上下是，呃，比如上面下是一个二十加速的吧，左右是一个 a u t o 的。然后呢，咱们再给他一个 diss 类，是一个 block， 让他居中， 哎，然后咱们再给他一个 border 加一像素 solid 井号儿，或者给他一个 pink 吧，一个粉色的冰块儿啊，或者给他一个宽一点儿二像素的。 好了，那么咱们打开浏览器就可以看到咱们的这个画布了，哎，可以看到咱们这个画布了啊，嗯，这个 note gs 下载地址呢？给大家发一下，大家回去下载一下 十二版本的就可以了啊。好了，这是我们看到的画布啊，那么我们的画布就相当于我们一个框往里面去画画，是吧，那么怎么去画呢？那么首先咱们要去获取这个画布啊，怎么去获取这个画布呢？注意看，哎，获取画布， 那么当然是在 c s 里面去获取啊，咱们要去获取画布，那就是画， 嗯，哇，这个，嗯， paris 等于， 哎，等于 document 点 跟着 itimid， 我们获取一个 app， 注意，这是获取的元素，他不是挂布啊，这是我们获取的元素，哎，跟咱们普通元素没什么区别，咱们打印来看一下啊，就是咱们的一个元素， 呃，好了，我们一刷新会发现，哎，就是由元素获取的，那么咱们呀，想获取他的画布怎么办？哎，那么我们来看一下啊，获取花布，那就是啊， 嗯，哇，这个 c p s 等于，嗯， cameras 点 get contact 哎，出入一个二 d， 也就是说呢，咱们是在二 d 的旋转模式下去获取的，那么也就是说，换句话说，它也是可以实现三 d 的，哎，跟咱们 c s s 一样，对吧？ c s s 三，咱们以前 点了三 d， 绘制一个正方体，对吧？啊？绘制一个爆炸流氓图是吧？哎，那么这，是啊，三 d 的，哎，那么画布也是这样的，咱们可以绘制二 d 的，也可以去绘制咱们三 d 的啊。呃，比如说呢，这个 cams 有什么用啊？ 举个例子你就明白了，比如说百度地图，咱们以前讲过，是吧？哎，那么百度地图啊，就是咱们使用 carouse 实现的， 哎。百度百度地图是吧？哎。嗯，打开它对吧？嗯， 哎，这个百度地图啊，哎。那么他就是用这个哎 terrence 去绘制的，哎。 嗯，哎。你看， 呃，在这里面， 嗯，在这里面，呃。就是要用这些个，呃。 carrots， 看到了吗？哎。用这个 carrots 去绘制出来的，哎。所以说呢，这是我们的这个呃。 carouse 一个应用啊。 好了，那么我们获取的上下文对象里面给咱们提供了一些个方法。 ak 方法，有的是在他的自身上的，哎，有的是在他的原因上的，那么在他自身上的通常都是这些个属性啊，在他原因上的，通常都是这些个方法。 那么接下来这两天呢，咱们就是要学习这几个属性和方法。嗯，好了，我们来看一下。 呃，那么它的 a p i 啊，那么在 command 之中啊，大部分都是操作路径，所以说呢，操作之前咱们要去开启一个路径，怎么开启呢？是比跟 pass 啊，用于开启一个路径，然后 close pass 呢？用于合并一个路径，那么我们说在合并，嗯， 哎，在合闭的啊，在闭合的时候啊，在闭合的时候啊，闭合时候的这个点呢啊，和最开始时候的这个点啊，之间会形成一个线段啊，会成形成一个线段， 嗯，然后呢？注意，那么这个叫 feel red 啊，用来填充我们的这个矩形，嗯，然后呢？ s 呢？表示我们矩形的啊，这个左上角这个点啊， y 呢啊，也是左上角这个点的横纵坐标啊， w 和 h 呢，表示咱们的宽高啊，表示咱们的这个宽高。呃，那么 strug 呢？表示啊，描边矩形啊，注意， feel 是填充，填充什么意思啊？是把这个王方块里面全部写写进来。描边什么意思啊？只是画他的啊，冰块， 哎，百度这种啊，那可不啊，你你得画到哭是吧。所以说呢，绘制百度地图啊，像腾讯地图啊， go go go 地图是吧。啊，那么这些呢，他不是一个人在开发，会有很多人在在开发， 哎，包括咱们很多 h 五的游戏啊，不仅仅是地图啊，很多游戏都是用咱们 carros 画出来的啊。 嗯，呃，包括我们的这个，之前咱们讲了一个叫 high 叉大数据可视化，哎，大家还有印象吗？哎，他们那些，呃，之前呢，也是用这个 powers 去绘制的哎，所以说呢，你不要感觉啊，这个会 会觉得哭是吧，你看这个地图里面呢，有这么多的元素哎，都是咱们点点滴滴啊，一点一点画出来的。 嗯，好了，嗯，然后 struck 呢？ red red 是用来咱们绘制这个描边矩形的， s 和 y 分别是起点的横纵国标。 w 和 h 呢，分别是它的宽度和高度。嗯嗯，还有，嗯， clear， 嗯， ret 表示啊，清除开关上的一个区域。嗯，那么 s 和 y 呢，分别表示它的恒重国标，嗯， w 和 h 呢，表示它的宽度和高度。 a r c 呢，表示绘制咱们一个弧形。 s 和 y 呢，分别表示注意圆心所在的横纵坐标， r 表示咱们的半径， star 表示咱们的起始位置， and 表示咱们的结实位置。嗯， b 啊，最后一个参数表示不尔值啊，我们说默认时 false 表示啊，顺时针绘制，那你成一个处将逆时针绘制， 哎，也就说呢，从上面这一点，顺时针就是往这边去绘制，那比如说你传递一个一百八十度，传递一个派，哎，那么它就相当于绘制了一半传递二派，那么相当于绘制了一个圆，然后传递一个处是逆针，哎，是从相反方向绘制的，哎，是这个意思， 呃。除此之外它这个 a p i 挺多的，咱们都看完吧。啊还有就是 feel 用来填充 rock 用来描边 and feel stale 啊，用来改变我们填充的颜色 struck stale 表示改变描边的颜色。 few test 表示绘制文字啊， found 表示啊啊改变文字的样式啊， land white 表示啊改变线条的宽 温度，哎，等等的。好了，我们一起来看一下，嗯，比如说呢，哎，嗯，咱们俩想绘制一条线啊，咱们先用简单的啊绘制一条线，嗯，来看一下，哎。这里边有没有血压， 嗯，呃。这里边还没有写，是吧， 嗯，咱们这里面加一下吧。啊呃。那么绘制这个线叫什么呢？注意看，叫这个 linto 和这个啊，叫这个 linto 这个属性， 呃，叫啊 land two 这个属性，哎。绘一条线啊，绘到哪里？然后这个木兔呢？表示啊，咱们把这个点移动到哪个位置去绘制， 哎，咱们放在这个里面去写一下啊，这个是啊， land tube 啊，这是啊绘制线，哎。然后呢？ move to 嗯，表示啊，嗯，移动绘制的起点 啊，移动绘制到起点。 好了，那么我们来画一下，比如咱们画一条线，哎。嗯，好了， 呃。那么绘制线，那就是啊，呃。首先呢咱们开始去绘制一个路径，那就是啊，启动啊，绘制，那就是啊。嗯，绘制 c t s 点 and begin pass。 然后呢，我们说在里面去移动。首先呢，咱们呀，呃，想从哪呢？想从这个一百一百这一点，或者到二百二百这一点，那就是啊，哎。 c t s 点， 哎。木，哎。吐。移动这个点，哎。从哪呢？从这个一百一百这个点开始绘制 啊？移动这个绘制啊。起点 好了。然后呢？嗯，接下来呢，咱们开始去绘制线， 呃，就是 c t s 点蓝 two 啊，蓝 two， 嗯，二百到二百，这，这一点， 是吧？哎。好了，然后呢，咱们开始去，呃，合并啊，就是这个是结束绘制啊，就是啊， cts 边 close path 就结束了。好了，然后咱们开始去给他描边， 呃， c t s p n stop， 哎，是，哎，这有没有这个描边啊？ 是吧？哎。给他描边。好了，那么这样我们一刷新注意看，哎，咱们这个线怎么样就绘制出来了，哎，咱们这个线就绘制出来了，哎，当然呢，我们以后想绘制多少线，咱们还可以把这个我们说，你再绘制条线，你是 还得再写一遍呢，对吧？啊？你这样绘制一条，你是不还得再给他写一遍呢？比如说，从这个，呃，三百啊，三百这个位置， 哎。绘到四百到我们的这个，嗯，三百这个位置绘制一条水平线，对吧？哎，那你看，你是不是还要再写这些逻辑啊？这些工作中我们通常会分装一些方法来简化咱们绘制， 哎，说明方法啊，比如呢，咱们呀，呃， function。 哎，比如咱们绘制一个叫线的这个方法，哎，那么注意他有起始坐标 x 和 y， 然后还有横，还有这个结束时候的一个坐标，哎，就是 and x 和这个 and y， 哎，好了啊，那么绘制的时候，那么 咱们给它首先去启动一个路径，哎，启动一个路径，哎，然后呢咱们移动到 s 和 y 这个位置，对吧？哎，移动到这个 s 和 y 这个位置，然后呢 我们呢去开始绘制到 and x 和按到这个 y， 那么这样的话，咱们封装好了之后，那么咱们再养绘制这个线就非常容易了。绘制线，那就是啊， 哎，绘这个线，哎，就是 len， 呃，比如一白啊，一白 啊，然后呢是二百一百，哎，咱们多绘制几条是吧？啊，比如这是我们的二百二百，哎，然后呢是我们的，嗯，比如这是一个一百二百，然后呢二百二百， 嗯，要是一百三百，绘制几条水平线，对吧？嗯，绘制几条水平线，好了，我们一一刷新，你看这三条线就绘制出来了，哎，那么这样咱们的绘制线是不是就非常的方便了，哎，所以说呢，工作中呢，咱们通常给他封装一下啊， 嗯，好了，嗯，然后呢我们说怎么去绘制圆呢？啊？绘制圆， 哎， n 这个圆形，哎，那就是啊 c t s 啊？还是这个 begin pass 好了，然后呢这是我们的 c p s， 呃，边 s 加 c， 呃， e 加 c， 哎，这是我们会址员儿， 那么圆这个里面呢？对，要传递几个参数，分别是圆心点，坐标半径啊，就是起始位置和起始位置，对，这是他的一个角度啊，是他一个角度， 嗯，好了，呃，那就是啊，比如说呢，咱们给他一个，呃，二百二百。这个点开始去绘制啊，然后呢给他一个， 哎，呃，给他一个半径，比如说是一百的，呃，然后呢咱们给他一个七十点，比如说零度到哪呢？到，太 注意啊，咱们有个常识是吧？一个圆三百六十度，这叫角度，是吧？用弧度表示，叫什么呀？叫二派，所以说呢，半圈是不就是派呀？九十度是不是就是二分之一派呀？嘿， 这个常识大家都知道吧？好了，嗯。然后从零度到 pad 啊，然后咱们给他一个 force， 这是一个顺时针。 好了，然后呢？我们呀，给他结束 cts 点，嗯， close 嗯， pass， 然后开始去给他一个 cts 点，嗯， stroke。 好，来看一下，哎，此时呢，我们一刷新注意看，哎，这个半圆怎么样了？就绘制出来了啊，就绘制出来了，哎，呃，然后呢？然后呢？注意。比如说呢，他是从，哎这个水平方向开始，这是零度，那么到这 就是九十度就二分之派，哎，那么水平线了，哎，就多少了。到这了，那么就是派了，对吧？哎，就是派了。然后如果是逆时针的呢，哎，如果是逆时针的呢？ 那就是啊，哎，给它传递一个处啊，那么这就是一个，哎。逆时针啊，比如说呢，给咱们给他一个二分之派除以二。好了，那么我们一刷新 好了，那么注意看啊我们一刷新，注意看，哎，那么逆时针呢，注意看啊。我们说，呃， 啊，注意啊，那么往下去啊，往下去，呃，这是我们的一个，哎，对，这个咱们是不是写反了， 嗯，呃，这是起始点啊，这是一个终始点，呃。然后呢？默认是一个，呃， false， 哎， 表示的是一个顺时针，哎，反之是一个逆时针啊，注意看啊注意看，嗯，咱们俩从零度哎到二 啊，到这个二分之派啊，注意啊，没有，没有问题啊，就说呢，呃，是从我们的这个他是，嗯，这是零度，是吧？哎，到这是不是我们的二分之派呀？ 哎。然后呢，如果是逆时针，哎，是往那个相反方向去绘制的，所以说呢，是大半个圆，如果是顺时针呢，哎，咱们是不是从上到下绘制的是下半个流圆啊？来看一下，如果是这个顺时针的话，哎，二分之派， 哎，那么注意看，那么他会指的就是下面这一块，哎，是下面这一块，哎，然后在描边的时候呢，他会默认呢，从这个点怎么样啊？哎，给他移动这个点，哎，把他们俩这个点 给他给给这个处理掉了，是吧？哎，给他处理掉了，哎。嗯，好了，这是我们绘制这个，呃，弧形啊，绘这个弧形，然后咱们还可以去绘制，哎。正方形，是吧？啊？绘制个矩形， 哎，叫 ctxbn， 呃， red red 这个，这个这个方法，然后呢，这个方法上，嗯，有，嗯嗯，有。我们的这个， 嗯，就是 structure rack 啊，四个参数吸血点的横同坐标以及它的宽高， 哎，比如说呢，始终一百一百到二百二百，也就说呢，其实位置是一百一百，这个点宽高各是二百，所以说呢，我们一刷新，那么他就是一个，哎正方形了，对吧，那么如果宽度是三百呢？啊，如果宽度是三百呢？ 好了，那么注意看，此时我们一刷新，哎，那么宽度就要变宽了啊，好，这是我们描边，我们还可以给他更改描边颜色，哎，更改描边颜色 好了，那就是啊， c t s 啊，点，呃， structure 啊 feel 啊， 就等于一个红色的啊 red 啊，你可以使用收紧值的，是吧？哎，其实它就是一个红色的了，哎，好，这是我们的这个描边，那么填充叫什么呢？哎。填充叫 c t s 点，嗯， feel 啊，叫填充 啊，叫填充。好了，我们一刷新会发现啊，会发现咱们呀，呃。给他这个填充一下， 哎，对，那么天冲啊，哎，咱们这个天冲矩形，对，这个矩形比较特殊啊，那么天冲矩形啊，用 feel rec 方法， 呃。用这个，呃 few red 方法，然后一看就变成一个黑色的，那么咱们明明设置了红色的，为什么他 黑色的呢？注意，这里面有两个操作，一个是描边，一个是填充，那么描边是通过描边这个 frog style 设置的，而填充呢，我们要通过 cts 点 and feel and still 去设置，就等于一个， 呃。绿色 green， 哎，这个是我们设置青棕色， 好，我们一刷新，哎，就是一个绿色。所以说描边和填充要区分开啊，描边和填充要区分开啊。 嗯，好了，嗯。然后呢，这个这里面呢，除了这几个之外我们看还有哪个咱们没有用过啊？嗯，哎，还有可丽儿 red 用来清除一块区域啊，比如呢，咱们要去清除一块区域，哎。清除相当于什么呀？拿这个橡皮啊，去把这个内容擦掉是吧？哎。清 啊，举行。那就是啊， c t f b n clear rack 啊 clear rack， 呃。然后给他，比如说呢，是一个二百，二百，一百，一百，哎。好了，那么注意看，此时我们一清空，哎，就把这一块怎么样给他清空了，哎，这是我们清空矩形啊，是我们清空矩形， 嗯，好了，嗯。然后还有哪个方法咱们没有用到过呀？ 呃呃。还有这个是 feel， 呃。 text 来填充我们这个字体啊，填充我们这个字体，呃。还有是我们的 land wive， 哎，设置咱们这个线条的宽度，哎，呃，比如说呢，我们呀，描边的一个矩形，哎，咱们可以改变， 嗯，描边，嗯，宽度，那就是啊， c t s 点，嗯， land y， 哎，这个是 land y 啊，比如它的宽度又给它等于一个五像素，好了，来看一下，我们一刷新，嗯，等于这个是五， 嗯，好，我们一刷新，注意看，哎，这个边框明显变秃了，是吧，哎。就改变它的边框，还可以绘制这个文字啊绘制这个文字， 哎，好了，那么绘制文字啊，那就是啊， c t s 边，呃，就是叫，呃， ceo， 哎， fun 啊，比如咱们输一个，哈喽，呃，然后呢，还有它的位置啊，比如在一百一百这个位置啊，去绘制一下 啊，叫 few text 啊，叫 few text， 好，我们我们一刷新啊，注意看，在这一百这个位置啊，咱们就给它绘制上了，但这个文字啊，太小了，是吧？哎，太小了，咱们想给它大一点啊，我们可以更改文字样式， 哎，好了，就是 c t f 边，哎， font 啊，就等于啊，就等于一个二十像素的啊，一个，呃，啊，一个二十像素的啊，然后 一个送体，哎，好了，这个送体看不出来呀，咱们写个汉字吧，啊啊，你好，哎，好，我们看，嗯，换一个位置，比如说这是一个， 嗯，二百啊，一百这个位置啊，好，你好，这是一个送题，是吧？啊，比如说，咱们给他换一个黑题， 嗯，呃，来看一下，哎，这个文字看到了吗？样式就发生了改变了，哎，这是我们修改样式啊修改样式， 嗯，好了啊，然后呢，找同学来说一下，绘制一个哑铃，什么是哑铃啊？哎，两个圆中间有一个杠，是吧，然后呢，咱们拿这个哑铃做运动，是吧？等他来说一下啊。哎，赵雷，来打开你的这个语音啊，来说一下，给我绘制一个。

既然我们学的是 cameras， 那么我们就以效果为目标，然后呢，一步一步学习它里边的知识。那么说，一开始接触 cameras 就要实现这么复杂的一个效果吗？ 那是你没遇到我，你早一点遇到我，你早实现了。其实这个玩意特别简单，简单到什么程度呢？就是你写出来了，你都完全无法相信他能这么的简单，因为 canvas 本身就是非常简单的技术， 他用来干嘛的？他用来画图的，他怎么画图呢？首先你要得到一个绘制上下文，通过 canvas 元素叼，用他的一个函数叫 get context， 里边传一个上下文的类型，就可以拿到一个上下文的对象。 你之后的所有画图都是利用这个上下纹来进行画图的，开发时呢，支持不同的上下纹类型，你们以后呢还会接触什么？ vip gl 可以画三 d 的图形，目前呢，我们选择的是二 d， 也就是说我们绘制的是一个平面图形， 尽管是平面图形，其实他已经可以绘制出非常非常丰富的效果了。具体的代码里边呢，你看我们现在写的页面上的一个 commerce 没了，然后呢，给他设置个固定定位，一个背景颜色，其他也别查了，到 gs 里边去呢，就是拿到 commerce， 然后获取他的上下文啊，于是呢，目前的 commerce 呢，长这样。 当然呢，你可以对它进行初始化一下，一般来说的话，初始化就是去设置 comes 的宽高，我们就让它等于窗口的宽高 啊，注意哈，你不要用 style 去设置啊，一定要这样子去设置啊，至于为什么，我之后再慢慢去解释啊，你先这样设置好，于是呢，这个开幕式就全屏了， 简单吧。好，我们完成了初始画，也拿到了他的上下文对象怎么画呢？画啥呀？是不是这里边特别复杂呀，画的东西其实特别的简单，我们来看一下通过这个上下文对象怎么来进行绘图。看的是知识的，图形就这么四种，画一个直线，画一个曲线，画文字，画图片没了，就 这么点，就这么点啊，复杂吗？简单的令人发指。那你说我要画个矩形呢，矩形就是由直线组成的呀，对吧，那我要画一个圆呢，圆就是一条曲线啊，一条自我封闭的曲线。那我要画这种图形呢，那它是由多段曲线组成的。 所以说开幕式的基础能力呢，就这么一点，剩下的事情就是你发挥你的想象力，用不同的形状组合形成丰富的图案。哎，那我们是不是要具体学习，他画直线怎么画，画曲线怎么画，你学他干嘛嘛？有啥好学的？ 这些玩意都属于 api， 就是有相应的函数支撑的，你需要画什么，去文档里边找不就完了吗？如果说你英文能力够好的话，那么我肯定是建议你去看英文文档，因为这个文档里边写的是最准确的， 如果说你看着吃力的话，下边有他的中文版。呃， mdn 的中文版呢，翻译质量还是比较高的啊，但是呢，也难免里边会出现版本之后啊， 或者是错误的情况啊。其实我已经发现有不少了，但是不管怎么样，肯定要比你平时看的什么博客那些玩意不知道要高到哪去了。我给我全讲的第一堂课就是要告诉他们，不要去百度里面去看任何东西，那都是什么玩意？你可以看官方文档，更多时候呢，你可以看我给你写的文档， 接受最准确的知识，有准确的知识你不要，你要去看博客，我也不知道咋想的好，根据这个文档里面的提示，你画就完事了。比方说，我们来画一下吧， 开始画画，不管你画的是曲线还是直线，他的绘制逻辑是一样的，都是先生成路径，然后再绘制。 比方说我们要画两条直线，怎么画呢？首先呢，我们调用这个函数，已经 pass， 表示我要开始画路径了啊，你拿一个东西来装我的路径，你可以把它想象成用一个数组来保存我们设置的路径。于是他就开始准备好了，来吧，你告诉我有哪些路径好，我调用这个函数，让他一 动到某一个点啊，路径有产生了是吧？比方说移动到一百五十，那么这个坐标呢，是以 canvas 的左上角为坐标原点啊，跟我们页面是一样的，向右呢， x 增加，向下呢？ y 增加一百五十呢，大概在这个位置吧。 现在画没？没画，现在还在设置路径，他是先把路径设置好了过后，最后画好。然后呢，让他从上一个路径点连线到下一个点， 主要下一个点呢，是两百乘一百，这个是 y 坐标。于是呢，可以想象啊，他的路径呢，大概变成这个样子的。接着我们又以上一个点为基准，连线到下一个点 角落，三百乘三百，那么他接下来的路径呢，大概就这样子。好，路径设置完了之后，我们看一下有没有画出来啊，啥都没有。为啥啥都没有啊？因为路径是路径，画是画。如果说你要画的话，怎么画呢？通常有两种方式，第一种方式呢，是做表示描 边，就是把那个路线的线画出来，好保存，我们看一下，你看这线是不是出来了，当然了，你可以通过其他的 a 片来设置它的样式啊，比方说我们可以设置 stock style 为白色，那么这样呢，就画出来了白色的线，就这么简单。 好，如果说你希望路径的最后一个点连接回路径的起点，那么你可以在绘制之前呢调用这个函数叫 closepass 关闭路径，这样子呢，他就会以终点连接到起点，你看 简单吧，以后这些玩意我记不住啊，哪需要你记啊，看文档，看火。好，我们画的时候除了描边之外呢，还可以填充 feel， 那么这里呢，要写上 feelstyle， 我们来看一下填充是什么样子，填充就是这样。 好，我们来试一下啊，我们画一条线就可以了啊，目前就画了这么一条线，然后呢，我想在线的两端呢再画两个圆圈，对吧？你看我们这个最终效果里边是不是线的两端有两个圈啊， 对吧，那我们就画呗，他代码看上去很多，其实他逻辑是非常简单的，就这些函数调来调去，首先我们画第一个点啊，重新开一个路径在起点，然后在这个点画一个圈，然后怎么画圈呢？ ok， 其实就是一个曲线， 告诉他 x y 坐标，这表示圆心的坐标啊，圆心的坐标也是这个啊，由于呢，这里已经知道了圆心坐标，所以呢，第一行代码呢，其实是多余的。好，下一个参数呢？是圆的半径。好，后边两个参数呢，指的是这个曲线的起始角度和结束角度。这啥意思呢？我画一个图，你马上就明白了。比方说这是圆心啊， 比方说你的曲线要从这个位置开始画，画到这个位置，那我画的不是很好啊，其实角度就是指这个角度，结束角度呢，就是指这个角度，懂这意思吧？哦，不过呢，这里需要把角度换成弧度，我们一圈呢，有三百六十度，换成弧度呢，就是有二派。那比方说吧，我们要画 这么一个曲线，那其实的角度就是多少？零结束的角度呢，就是这一段，那就是派三百六十度，二派，那一百八十度不就是派吗？那比方说，你试一试呗。 nice， 点派来画一下， 你看一下，这就出来了啊，关于清晰度的问题，我之后解决啊。好，他其实还有最后一个参数表示顺时针画还是逆时针画？如果说你传一个处表示的是逆时针画，你看一下， 变成这样就这么简单，那我要画一个圈怎么办呢？那就是零到二派呗，对吧？甭管顺时针还是逆时针，他都是一个圈，那你看这个圆不就出来了吗？不过呢，这是描边的画法，我们还可以进行填充。哎呦，来设置一下填充的样式， 你看不就画出一个点了吗？那我们要在另一个地方画点，重复一下就完事了。换一下坐标，你看这个基本的图像是不是有了，不就是两点之间一条连线吗？好，我们可以把 代码呢进行封装一下，不要写到全局，写的太繁琐了，我们来写一个构造函数点有什么点？不就是有 x 坐标 y 坐标吗？那么 x 和 y 坐标呢？我们随机生成，来写一个随机的辅助函数。 你千万不要让我讲这个哈，你只要过了借是基础，这种代码你不应该有任何问题哈。好，我们再设置一下，每个点点就是圆嘛，他的半径，半径的话，比方说给他设置为六。 好，一开始呢，我们随机生成啊， gets right， 最小值为零，最大值呢就是 campus 的宽度减去他半径的一半 y 值呢？是同样的道理啊，这里画出高度，然后我们给他写一个错方法，咋画呢？单法复制一下，好把这些值替换一下。 好，咱们来试一下啊，比方说我要画两个点，我就可以来个 p 一溜一个 point， 来个 p 二溜一个 point， 对吧？随机生成位置， p 一画， p 二画，你看两个点不就出来了吗？你刷新刷新刷新刷新，他就随机到不同的位置了。那我要画一百 哪个点呢？重复的去做这件事不就完了吗？那连线呢？都简单了是吧？思路一下子是不是就打开了？你虽然可能写这些代码写的磕磕绊绊， apf 用的不太熟，但是个基本的逻辑就出来了呀。比方说我们再重装一个构造函数 red 图，多个点连成线不就是图吗？来吧，你给我一个点的数量， 默认三十个吧。好，我就生成三十个点不就完了吗？等一句话写完，然后数组的每一下映射为一个点扭破，这就生成了一系列的点了，而且每个点他的位置是水集的，然后我们做一下，画一下，循环每一个点， 然后把它画出来就完事了。而有了它之后呢，我们可以用它来构建一张图，下边代码不要了，这些呢，都是封装的知识是吧？跟开发式也没啥关系，你代码封装的能力强了，你写啥代码都是轻轻松松的。那怎么样训练这些逻辑能力？你不要在市面上去找一些乱七八糟的教程，那些付费的乱七八糟 教程还不如我们免费的大师课远远不如。我也不跟你吹牛逼，你来看一看就知道了什么是好的教程，一个知识要讲究到什么样的深度才是足够的，大师课都会给你答案， 他时刻要解决的问题不是给你劝技，而是会实实在在的解决你在技术上最根本性的问题。他从 v 八引擎的原理讲起，涉及到的全都是前端最核心最重要的知识， 而且里边涉及到了大量的面试题。我跟你讲面试题的时候，我给你的答案，你不用吸收百分之百，你吸收百分之六七十，在面试的时候要吓死人的，那个效果是夸张，你是完全无法想象的。 像我们很多学生去一些中小企业面试的时候，必须要游着来，不是吹牛，真的要吓死人的。去大厂的时候呢，好一点，因为我们目标就是对标大厂，那可以放开手脚干，但是也很吓人的，因为大师的目标不是仅仅解决你的生存问题，找一份工作这个问题顺便解决了，而是要解决你长期的发展 问题。三十五岁危机怎么办？面临被裁员怎么办？怎么跳槽？掌心大师课都会给你答案，所以呢，还没有领取过大师课的同学抓紧时间啊，过来领。怎么领取？评论区第一条进咱们粉丝群，然后根据提示领取就可以了。好说，回来我们调用这个做方法画一下。嗯 啊，这里需要写个练词。好，走，你看这满天星的效果就出来了。那么剩下的顺序是连线的怎么连呢？我有这么一个数组， 这些全是点是吧？怎么连线？先从第一个开始，这样连，这样连，这样连，对吧？找到每一个元素，把这个元素跟后边的元素全部连起来，说这个循环呢，怎么写？这就相当于是 p 一第一个点，第二个点呢？再循环自身 a 加一，开始跟后边的点相连，怎么连？把这代码扔过去，改一下这里的参数，保存好，看一下是不连起来了，别忘点 连的，有多恶心的，连没连吗？连起来了是吧？好，接下来我们做一些小的调整。首先这个颜色呢，其实并不是白色啊，当然无所谓了，你爱用啥颜色用啥颜色，他是这样的颜色好，下边的颜色呢，也是这样的颜色啊，颜色先染一下， 然后说一下接下来怎么办？在连线的时候啊，我的连线的颜色呢，实际上是变化的，你仔细看一下这边。好，你看一下他的两点之间的颜色，他们是不是透明度啊？是在逐渐变化的，对吧？他是怎么变化的呢？这个逻辑很简单，两个点，他越远，他的线的颜色呢，就越透明， 越近呢，就越不透明。所以说这里呢，实际上是一个 r g、 b a， 这里呢写的是一个透明度，那么这个透明度写多少呢？我们来研究研究。如果说两个点的距离为零，那么透明度肯定是不透明的为一，对吧？这是极端情况，当两个点距离过远的时候，比方说到五百个像素的时候，我认为透明 度就变成零。因此呢，这里第一个问题，就要设置一个最大距离啊，咱们在这里呢，构造函数这里设置一下啊， max 默认为五百，你可以重新改动这个距离啊，把它保存一下 好了。到达五百的时候，透明度为零，那么自然而然到达二百五的时候呢，透明度为零点五。假设现在的距离 d 啊， d 在零到五百之间，那么他的透明度应该等于多少呢？这个规律不难看出，他透明度应该等于一减去 d 除以五百， 是这意思吧？好，于是呢，这公式再套进去，拼接上已减去 d 除以多少？五百当然不能写死啊，要用这个属性 max dis。 那么剩下最后一个问题了，那 d 怎么算呢？两点之间的距离 d 怎么算？那这个数学计算得多复杂呀，来看一下多复杂吧。这是我们的画布，这是第一个点， 这是第二个点。我请问这一段是啥？是不横坐标的差值？这一段是啥？是不是重坐标的差值？我们要算的是啥？ 这一段直角三角形，他的平方加上他的平方等于他的平方，知道咋算了吧？这个 d 咋算？横坐标的差值，他的平方加上重坐标的差值，他的平方等于这个 d 的平方。那么换人言知 d 等于啥？ 对这玩意开个暗号，当然距离太大，超过了五百，那我就不划线了。所以呢，判断一下地，如果说大于了最大距离，那我就不划线了，长停留看下个点吧。好把这个 pr 提上来啊。因为这里用到了 pr， 好保存看一下。而距离呢？还是太长了啊。我调整一下这个值，调整成两百吧，你看是不是好多了。那么至于说后边怎么解决清晰度的问题，怎么来制作动画的问题，都不复杂了。下节课我们搞定剩下的事情。

这是一个基于看发丝使用 gs 开发的二维码生成开源项目，只要你的浏览器支持看发丝就可以使用，它的使用也比较简单，我们呢需要先安装它这个包，安装完成之后，按它下面的这个例子直接导入，就可以把那个你需要生成二维码的 数据传给这个 data， 并且呢他还支持 note， 下面都有这种势力代码，可以试一下。他还配备这个他的实现的这个 demo， 还有开发文档还有势力，我们可以分别点进去看一下，这就是他的开发文档， 可以看到他的这个文档写的还是比较详细的，这是他给的一些例子，我们可以点击这侧边栏的这些条目，在右侧可以看到他的一个展示效果，比如说文本 带 logo 的，这是它实现的一个实力，我们就可以调整它的一个尺寸，调整它的一个间距，还可以去添加一个图片，功能还是比较完善比较丰富的，有需要的可以试一下。

如果你能用 class 做出这个双人格的小游戏，那么你的薪资可以再加三千。那先来看成品展示， 双人格斗小游戏核心就是要去实现一个 fight 类实力化，这个 fight 类可以得到一个实力对象，那么这个实力对象就是角色对象， 那么我们要继续去增加一个角色就是一件非常简单的事情，只需要实力化这个 fate 就可以了。那每个角色对象都维护了几套角色动作，像水平移动、上天 下落攻击等等这些动作，那这些角色动作的切换是通过按下不同的键盘按键来控制的，所以在这里我们要绑定一个键盘试键，不同的按键执行不同的动作， 那这些动作分为受控动作和非受控动作。水平移动是受控动作，就是我们键盘停止按下之后角色会立即停止，而攻击是非受控动作就是必须等我们攻击的这一套动作完成之后，角色才会停止， 然后还有攻击检测，攻击方和被攻击方实际判断的是攻击方加上武器的距离和被攻击方身体接触的判断，那武器距离我们可以在实力化的时候自定义，然后还有就是血量的减少，输赢的判断等等。如果你能做出这个格斗游戏，那么你就可以去提加薪申请了。

哈喽，大家好，上一条我们讲到在这个 canvas 里面如何把这一样一个线条画出来，那接下来呢？我们来讲一个这个里面的渐变填充到底该怎么做？首先我们恢复成这个样子，那渐变填充首先要了解一个点，是 我们这里 canvas 他其实都是基于路径的，对不对？那如果是路径的话，我们需要怎么做？我们这样一个线条的路径已经画出来了，已经填充了线条的颜色，对不对？那么这个时候我们从这 我们想要填充这里面的颜色该怎么办？我们继续画就好了，比如我们的宽度在这里，高度在这，我们把这里再重新画，然后再往上，对不对？这样一个区域的路径就被我们画出来了，那路径都已经画出来了，我们再往里面填颜色，填一个渐变的是不是就 简单多了？那只要我们在这里，这个来图，其实就是这里的点位已经画好了。刚才我们要往下画的时候，然后顺着往往下画，再往左画，往往上画，其实就是这三步， 然后最后呢再把这个路径给他封住，再给他填充上，他就画好了。那这里的渐变色呢？在这个上面用的是这个方法，这个方法里面有两个点位，这是什么点位呢？ w 除以二是相当于宽度的一半， 宽度的一半，然后又是零点位在这，那第二个点呢？ w 除以二也是这个点位，但是 h 呢？是最下面 h 在这个点位，也就是说我们画了一条 这样方向的线性渐变，这就有点像我们的 css 里面的方向角度，对吧？ 对，那方向角度设定好了，再给里面设定两个界面颜色，再把这个界面颜色设置给这个 style 就可以了，那这样一个画好了呢？最下面我们要解决一个很关键的一个点，动画 carries 里面的动画其实就是通过序列真的方式，序列真什么意思呢？就是通过 不断的进行 canvas 的绘画，给大家举个例子啊， carras 里面是这么样一个图画，我给他截下来， 比如说在这，那这个时候呢，我们要如果想要动画的话，可以这样动，如果想要动的更多呢？我们可以在这你再接一张，然后再来 再挤，再来再挤再来，这样的叠加在一起的效果呢？其实就像是一个动画了，那 carros 里面就是通过这样不断的进行重 会多次形成起来，就变成了一个动画。那在 canvas 里面用动画，我们一般采取地规采取这种方式，那比如说是这样哎，我们可以把这个 drone 用 satamote 里面一直地规循环，里面间隔零点一秒， 那这样的话他就形成了一个很缓慢的一个动画，对不对？那么这时候我们把速度调整一下， 他就动起来了，因为他在不断的重绘，不断的重画叠起来，叠的很快的时候，就像是一个动画。

好，今天咱们继续讲 cars 的文本操作，这几个是文本操作相关的 api， 我们先来绘制一点文本体验一下 看。绘制好了，其中放特是用来设置文字大小以及字体下面的太子烂和四 s 中的作用是一样的。可以设置文本的横向排列方式 tax baselin 是设置文本的纵向排列方式。当然调用 feel tax 是绘制文本的动作，你需要给他提供文本和文本展示的坐标。我们还可以通过 stroke tax 绘制文本边框卡瓦斯。还有一个 api 可以推算出即将要绘制的文本的宽度。由此我们可以实现一个限制文本宽度的函数， 它的原理是先默认使用提供的字体大小，然后推算出渲染后的文本宽度是否超过预值。如果超过了，我们就循环递减字体大小，直到文本宽度小于预值。这样就能实现一个根据宽度自动调整字体大小的函数。好了，需要代码去我博客里找。

你说在页面上要显示一张图片，用不到 campus， 但是你要做到点一下周围就变绿的这种图片，你用 email 元素咋做啊？ 你做不了了是吧？那么这种情况下 canvas 就可以做了。好，我们这节课呢，来了解 canvas 如何来处理图片，我们页面上呢，有一个 canvas 没了，然后在 gs 里面去呢，我们首先要把我们的图片画到 canvas， 给大家写个函数啊，如何画呢？要画图片，你首先得有一张图片，所以呢，我们创建一张图片给这个图片的 src 属性复值啊，这个图片路径呢？在这里。 好，这个图片有了，这个图片，你不用加到页面上啊，我们是需要把这个图片呢画到 canvas 里边，图片上有一个事件叫做 onload， 当图片加载完成之后呢，会运行这个函数，在这个函数里边就表示说图片已经准备好了，你画吧，那我们就开始画做 image， 把这个图片呢给他画到 canvas 的左上角。 好，咱们来看一下啊，目前的图片呢，是有画进去，但是那个画布的尺寸呢，跟这个图片是有差异的。既然我们这个 cameras 呢，只是要画这张图片，所以呢，我们就把这个 cameras 的尺寸啊，跟图片设置成一样的。 好，这样一设置之后呢，这个图片就画进去了。那么接下来我如何来做到点一下就变绿色呢？这个呢，就涉及到一些进阶的图片处理了，我们首先要监听用户的点击事件，点击的时候是不是可以拿到用户在 cameras 里面点击的 x 坐标和 y 坐标，是吧？ 来，我点一下，你看是不是拿到坐标了，拿到坐标要干嘛呢？你看一下这边的效果啊，我点一下之后啊，是要把我点的那个点 周围的相近颜色全部变成绿色。再来一次啊，把我鼠标点的位置的周围的相近颜色变成绿色。 那么这里就首先出现了第一个问题，我既然要找相近，跟谁相近，说跟我点的那个点的颜色是相近的，那么这里呢，第一个问题就是要取出点击位置的像素点颜色，那么如何取呢？其实你可以把整个 commerce 呢想象成一张图片， 一张图片有很多的像素点组成，你可以通过这个函数 get image data 得到 cameras， 从左上角到 cameras 右下角整个区域的所有像素点的颜色全部拿到这拿出来呢是一个数组， 来我们点击一下啊，你看拿到的是一个非常长的数组，数组的长度呢有七十万，这个数组里边装了很多很多的数据，那么这些数据呢，就是每一个像素点的颜色，我这里呢有一张图可以看得非常明显，比方说我们就六个像素点啊，针对这六个点的颜色呢，我们在 数组里边呢，就是这样表示的，他啥意思呢？前四个数字表示 r、 g、 b、 a 没问题吧？他对应到第一个像素点，后边四个呢， r、 g、 b、 a 对应到第二个像素点，依次内推第三个，第二行第一个，懂这意思吧？那么这是第二行第二个，第二行第三个， 所以我要取出某一个像素点的颜色，我关键就是要找到那个数组的对应下标， r、 g、 b、 a 就可以全部取出来了。但是我怎么才能找到这个下标呢？我手上有的是啥？有的是 x 和 y， x 和 y 跟这个下标有没有什么换算关系呢？就是下边这个公式，你自己可以看一下， 其实这个公式呢，也不难推导出来，你自己带入去算一下啊，肯定是没问题的。为了方便起见，我可以写一个工具函数来帮我计算这个下标叫做 point to intex， 你给我传一个位置，然后呢我给你返回在 m g 这套里边的下标， y 乘以宽度加上 x 乘以四。好了，有了这个函数之后呢，我们就可以非常轻松的来写出获得某一个像素点的颜色函数了。 你把这东西都给我，我咋办呢？我首先计算出下标，有了这个下标之后啊，我就可以得到 r， t， b， a 的值了。 r 的值是什么？就是取这个 data 数组里边的第 i 项，是吧？那就是这个 同样的剩下几个值呢？那么就是 i 加一，加二加三，这样就能取出这个点的颜色，所以呢，我们要得到这个点的颜色就非常方便了。鼠标点击的点他的像素点颜色呢？要用这个函数就可以拿到 打印一下啊，点一下，你看这个颜色一看就很像是一个红色，对吧？好，那么接下来我们要做的事情呢，就是改变这个像素点的颜色，我们可以写一个 辅助函数来完成这个操作，传入一个像素点，我来改变这个像素点的颜色，把它改为绿色。这要改的话也非常简单，我们只需要拿到这个像素点的坐标啊，在数组里边的下标，然后把那个下标依次去修改一下，对吧？绿色嘛，所以说红是什么？零 绿呢？二五五，然后剩下的把它设置好就行了啊，这个透明度呢，最大值是二五五，表示不透明。其实呢，它还有一种简便的设置方式是里边有个函数要 set， 你把这些值呢传过去啊，然后呢给他一个天一亮，哎，啥意思呢？这个数数很长是吧？从这个下标位置开始连续设置这四个值啊，这是种简便的做法， 当然呢，你可以进一步的把这个数组呢截到外边去，因为要反复用的吧。啊，这里呢，传入变量是不是都是可以的？好，于是呢，我要改变点击到这个点的颜色，我们是不是就可以调用这个函数来， 这个时候，哎，传进去就可以改变颜色了，但是你要注意啊，改变的是内存里边的数据，这个数据并没有应用到我们的 cameras 里边去，所以说你即便是这样做了，你点击过后呢，他只是数组变化了啊， cameras 并没有任何变化啊，下面有个警告， 他说你要这样子反复的读取开幕式里边的像素脸信息的话，他建议你啊加上这个配置，就是在这里加上这个配置，把它设为 q 啊，这样子呢，流量器会做相应的优化，避免了效率低下的问题。好，回到这里来，现在呢，我们改变了颜色，我们如何把改变过后的输出 应用到 campus 里边去呢？其实也非常简单，这个上下文对象里边呢，有一个函数叫做 put 给 magit， 你把修改过后的那个数组给他传进去，其实就是一整张图片的像素信息全部给他传进去， 然后告诉他这个图片画到开幕时哪个位置左上角零零，把这样的图片给他覆盖掉就完事了。咱们来看一下，点击之后，不知道朋友们能不能看得清楚啊？ 说有一些绿色的点在里边对不对？因为我们目前呢，只是修改了点击位置的像素点颜色，那么剩下的问题呢，就是如何把它扩散出去，怎么扩散呢？那就地规呗，我改变了自己这个点之后啊，上下左右他的点都要改变，所以说地规的调用，这个函数 x 加一， x 减一， y 加一， y 减一，但是这样子肯定会形成无限的地规。当在进行地规过程中呢，我们要做一些终止条件。首先呢，这个 x 和 y 啊，他不能超过范围是吧？坐标超过了范围，那就啥也不干了。还有呢就是我只改变相近的颜色，那么我们如何来判断两个颜色 是否相近呢？我就用一种非常简单的说法啊，写个辅助函数叫地府，你给我传第一个颜色，再给我传第二个颜色，我就非常简单粗暴的把两个像素点的 r、 g、 b、 a 分别相减，求绝对值，然后相加。如果说两个点 颜色完全没差异的话，那么求出来肯定是零，只要有差异，求出来肯定是一个正数。好，有了这个辅助函数之后呢，我们到这边来，什么情况下我要改变颜色，是不是只有跟这个点击的点颜色相近的时候？换句话说， 如果说两个颜色的差值大于了某一个值，我觉得颜色相差太大了，到了颜色的边界了，那么这个时候呢，我就不再进行下去了。还有一种情况呢，就是这个颜色呢，跟绿色他的差值等于零，说明这个颜色已经被改成绿色了，因此呢也不再更改， 这样呢，避免无限的地规。好，咱们再试一下点击啊，这里呢还有个参数比传递啊，好，来点击，你看是不是变化了？点击，点击是不是变化了？当然我这个图片呢比较小，如果说稍微大一点的图片的话，你用地规这种方式呢，可能会出现站溢出的情况，那么你需要把地规的格式呢改成循环。 这个我就不说了啊，相信同学们都会，你大不了用一个变量来模拟一个赞吗？这有什么难的呢，像那种开了式去玩图片啊，其实花样可以非常多的，你想啊，你把一个图片的所有像素点的信息都拿到了，还有什么不能玩的呢？差的只是想象力而已了。