08_尚硅谷_h5_canvas-绘制路径.wmv原创

OK，好，那我们刚刚已经讲到了绘制矩形吧，是不是，那讲完绘制形我们看应该讲什么？OK，那我们这边不光光讲了基本用法跟绘制句型吧，啊讲这些思想大家注意一下，然后我们来讲绘制路径。CTRLC，这样我们再来扣一把CTRLC，我就从这个基本用法上面开始抛起零三啊，我们把绘制路径好，那绘制路径这一块啊，需要大家去注意很多东西啊。好，我们说过了，好我们说过什么概念啊，想一想刚刚我们说了一个什么绘制举行，我们是我们说看到里面是干嘛，只能是绘制举行的时候调一个就可以吧，其他的方案的话，对应该干嘛。都应该要通过路径来解决吧，是不是？呃，讲这个路径之前，我们再来讲个小东西吧，我们我把它放到这吧，我们是不是说不能用CSS来指定它的高官啊，我们来说一个高端问题，好来看一下现在我们看我在里面会是什么东西。

啊，我就干干净净让他去估计个矩形上，OK，那这些东西都可以。嗯，不对劲。这个全部干掉，全部干掉是好，把上面这个换成pink就可以了啊，只你好，那我现在是不是就干干净净的去绘制这个句子啊整。哎，是不是绘制矩形啊，只不过这个颜色改改吧。啊，OK啊，这个颜色很讨喜啊，是不是啊，这OK绿色吧，OK，这叫贾乃亮色是不是？OK来看一下啊，所以你看我们现在是不是干嘛，三百三百我把他干掉。啊，我们看掉默认什么三百一百五吧，所以你看。

图形有任何变化吗？没有吧，比如说干嘛这里面高发，你随便去指定指定什么600，看能不能加PX，这边600加400啊，这边其实可以加PS，一般我们这个嘛，不要去加六百四百吗？里面图形是不是一直都没变啊，看一下如果通过CSS。OKY600PXY400PX走你看一下，刷一下，你看是不会拉伸的啊，所以说为了保持这个图形干嘛跟我们的设计是一样的，千万不要在CSS里面去指定画布的高宽，画布的高宽一定要放大。里面这个叫什么。是不是分清楚好这里是不是可以的啊好，OK，那我们继续，好，那我们说完这个高方问题之后，我们来画一下这个路径吧，OK，那我们说比如说现在我们画一个三角形是吧，三角形怎么画？

OK，我们说干嘛，三角形是没有通过一个API就可以解决的，是不是，那怎么办？那看一下课件。OK，绘制路径好，绘制路径这边我们说什么啊，开发的基本元素是路径，开这个啊，图形的基本元素是路径啊，路径是通过不同的颜色和宽度的这个线段或者曲线相连成的不同形状的一个点的集合啊，这就是套路是不是？官方的定义嘛，步骤，首先你要创建路路径的起始点，然后命令，然后干嘛，你要使用画图命令去干嘛，去画路径之后要把这个路径。封闭啊，一旦路径生成，就应该有图形出来了，好像听不懂。是不是，其实很简单嘛，首先你要去画了C点摸就抬起你的画笔，我让你去50 50这个地方行不行啊，这个木就代表抬起画笔啊，记住他还是我画笔身上的一个API，现在我们学的所有的API，除了什么。

Get，其他都是画笔上的是不是OK，那这个里面我改一改啊，我把这个test全部改成什么看啊，这样的话大家比较好记。啊，那我这边改了。开走，你是不是现在我只让画笔去移到什么五十五十的位置吧，好，而且我们说干嘛，第二步干嘛，首先你是干嘛，我的起始路径啊，起始点已经有了，然后干嘛使用画图命令去画出路径嘛，OK，我们说掉一个画图命令ctx点来就好，你这个时候有没有去画，没有只告诉你下一个点在哪，把你这几个点先给你描一描懂不懂，比如说干嘛，我说还是五十一百，那是不是垂直的一条线。

是吧，OK，我们干嘛再干嘛，让你ctx点人就OK，我要去什么？怎么画一个直角，现在现在其实我们画的是这样的。是吧，是不是现在要去这个点一百一百是不是OK，去了这个点之后，我们说什么，三个点是不是定确定了，确定完了你点让它去画，你现在只是干嘛？首先抬起画笔到这个点，然后再在这个点给我点一下，再到这个点给我点一下，问题是要连连起来吗？怎么连ctx点什么。如果是画线的。是不是在哪来看一下整理。看见没有，可是没有闭合吧，那怎么办？CT点要人还得回到哪个点，五个？

只有你，诶好像有问题。这个T要大写是不是整？你看是不是一个三角形，这我们是画线吧，你也可以干嘛，代表什么，填充这里。看见没有，我问你是线的这个图形大还是还是填充这个大啊，肯定是线的大，线要在外面去描边框的。懂吗？OK，那我们来看一下，我们走挥之不尽其实这四步能不能理解了，是不是？OK，我们说干嘛这个比巴不看是不是啊，是不是，我们是不是讲到这一篇啊，将笔触移动到指定的坐标上，那干嘛绘制一条从当前位置到X及Y0么直线有绘制吗？其实。也没有，他其实干嘛。其实这什么，其实你要我说的话，就加比处干嘛也是移干嘛移动到XY上面，只不过你待会调这些命令的时候，干嘛他会从这个点画到这个点而已。

能解吗？然后讲了这两个A撇，一个是画线，一个是填充，是不是，是不是还有两个，一个叫close，一个叫begin pass。好，首先来看close pass，我看大家看现在我们记中是不是每次画的时候都要你自己去干嘛秒点确封闭啊，比如说干嘛我说让你自己想想，你自己封闭点，Close pass自己自己封闭路径吗？它相当于会自己干嘛。瞄回去。自己会从这个点瞄到，摸出了这个点懂吗？啊，这个叫肯定要pass是不是？可是告诉他一个问题，Feel，它会自动合并入解。因为你是填你是什么填充了吗？你看现在是不是只瞄了三个点，它会自动合并路径，OK，我们记住了么？OK，这你什么我们说非要干嘛。

方法会。自动合并路径这什么理解啊，OK啊，我们什么就呢不会的，要你手动去啊合并路径啊，什么ctx点什么。这是不是好，这里大家看好，比如说干嘛给他一个颜色啊。这不个颜色ctx点什么就什么，等于一个，你比如说现在我没有合并的路径来看一下。走你你看上面就是没有，是不是一旦合并了路径干嘛。是不是就有了，那么讲，比如说我把它画换大一点嘛，我们一百一百这个位置出去，那我是不是要去对吧，一百两百的一个点啊，最终呢，去两百两百的一个位置吧，那这是不也是个。

周点你看这个是，这个是不是就比较大了，是比如说让线的这个变粗一点怎么办？Ctx点什么the y啊，比如说等于十之，你来看一下。你看这是不是有的啊，一旦你没有，那就尴尬了啊，就没有了。两个边框吗？是是没有缺，就两个边框，懂不懂，漏出来一点吗？那没讲，OK，可是我们一旦就有了，是不是，可是我问你，如果这个东西写在上面。有吗？没有，我们说是啊，同步的，记住开发式是同步的，必须先制定。好，这个能没讲好，OK就上来了，好，那这个应该可以理解了吧，OK，那理解完这之后我们来讲还有哪哪个A篇我没有过。

Begin pass begin pass干嘛是不是？明儿我们来说一下这个什么。比begin是一个很重要的一重，好比如说我现，比如说我现在这样啊，好大家上来看我怎么玩呢？嗯。大概现在我是不是画了一个三角形是吧？OK，我把这个线也不要搞得那么粗啊，这个线稍微搞细一点，搞成丝吧。OK，是不是这样的？好，我让你看看，比如说我再来画一个，好吧，我再来干嘛木，OK。

好比说干嘛？我木土到想想。不是到哪了？从两百两百这个位置嘛。再往下画一个，那这个应该多少，200万，最终是去三百三百。是不是，所以你们来看一下。这里下面是不是又填了一个，比如说把这个feel也改一改Ctx.feel掉等于什么？嗯，灰色，呃，我们本身就是灰色，是不是PI粉色是不是走，你是不是有没有发现一个问题。有没有发现一个问题啊？啊，比如说这个改成不用改成贾乃亮式。整理我来看看，我说我是不是画这个矩形的时候让你去填充啊，可是你是不是把上面的矩形也给我填充，是不是，这是为什么，OK。

我有没有抬起？我抬起了吗？木，不抬起了吗？抬起一下，抬起一下吗？哦哦了呀。我不抬了吗？你说这边写棱柱一样吗？一模一样的吗？我在这边干嘛，我还过一次了，不是连续的了两个图形了，是不是这为什么？记住我们这边都叫什么。路径啊，你木的都叫路径，OK，我们开发时会有一个容容器，自己会有一个容器，这些容器里面都是存放一条条。路径啊，就什么，你调一个API，我在这边干嘛，存一个路径，存一个路径存一个所有的指定都在他这个容器里面，可能是个堆结构，懂不懂，每次去画图的时候，要之前画图那边的时候，他会把里面所有的路径全部拿出来绘制一遍。

懂吗？问你调这个的时候问你啊。有，有几条路径在三条，那就把这三条路径拿出来画画，调这个费的时候，问你有几条路径在六条，就把这六条路径全部拿出来换换。那不讲，比如说这样，我们来看看CTRLX，我先F是不是，我再在这边干嘛划线问点两个矩形是不是啊，两个三角形是不是都画的线。两个三角形是不是都画到线了，比如这边干嘛也是pass吧是吧，因为你非要为什么自动。填充的吗？不是是自动合并路径的吗？是吧，来看一下你。

啊，不知道看有没有对划线都划线了吧，相当于我调这个API的时候，对他们有没有产生影响，有。因为我现在我这个容器里面有几条路径，六条路径是不是，那我们本质上的意思是什么，我们说我们要画两个不相干的图形。是不是？那怎么办？每次画图形的时候，把这个路径容器给我begin pass掉，什么意思？清空一下g begin啊，这个是用来干嘛的？清空路径容器路径容器就一个清空路径容器，再来看走你你看他身上还有线吗？为什么来看一下嘛，我们说上来路径容器路径容器几条路径。一条两条三条三个点吗。

三条路径嘛啊，这不是线啊，叫路径嘛啊三条路径嘛，是不是OK，比如这个嘛，一开始我说这里面有三条路径是不是啊，OK，我说你待会要close past是不是OK，然后你调一个非时候就影响他们。这三条路径是不是OK，然后肯定要pass怎么办？干掉干掉干掉是不是，然后又进来几个三个路径，一个两个三个路径，然后你干嘛，但是你待会也要去合并的，然后你干嘛调这个1PI就去影响这个路径，路径这三个，因为前面三个已经被干掉了，记住k pass干嘛清空路径。容器。能理解吗？能不能理解这个事情OK。好，那肯定要发这个一篇也讲完了，对不对，OK，这里面提出来了一个概念，叫开发里面的路径。容器好的好，那我们来看还有哪，还有几个没过，这里面看是不是都过了。

是不是啊，OK，我们说这个close上面需要大家注意什么，划线的时候不会自动掉的，填充的时候会。自动掉是吧，OK，我们这边写写吧，干嘛不会自动调用什么close pass是吧？这边呢，自动调用close pass好OK，那前面这几个move to learn to啊，自己注意一下等等，特别是这个move to跟learn to，我们来看看。比如说这样摸出跟人图，我们稍微来测测。好，CTRLC啊，我再来填一份CTRL1。零三啊，木珠跟珠是不一样的，就看这个皮有没抬起来是吧？木to and learn to，是不是？比如说看好现在把它搞得搞得干净一点，是不是我们就让他去画线。

是不是这样在画线，我们来看现在我画一个图么线啊，是不是干嘛连在一起的，OK，颜色好像有点眨眼睛。整你现在是不是连的？OK，我们来看你是干嘛，我不让你们连。啊，我从一百一百这个位置干嘛，现在是不是我点在一百一百这个位置是不是，然后我们说什么，下一次是不是从一百二百这个位置开始画，我说你下次在52班看他怎么画。走你哎，是不是拉过来了五十二百嘛，是不是啊，然后干嘛最终连到了。200位置吧，最终完却啊，我随便下去一个吧，100到看在哪。走你，你看这是这个是永远都是连的，如果我下一笔干嘛，我说你还是扔度是不是一百五到100走你。

还是连着吧，看着我下次干嘛。CTx.Mo是不，我到。两百两百的位置去是不是有干嘛，我到两百两百位置干嘛我再去。Learn to ctrl c到哪边，我到两百三百是吧，看怎么画的，有有几段两段那么讲，如果你这边掉的不是不出掉的是什么。Learn to。那就会干嘛连上。这里看到没有，说明这个木是会抬起画笔的。等等，OK。好，那这几个片应该没有太大问题。是不是啊，OK，那底下来我们再来看还有什么问题啊，诶画矩形吗？之前有没有画过矩形啊。画过，那我们再来画一次。

再换就行嘛，是吧，可能就是再换成。CTRLV之前画矩形，我们掉了一个人。那能能不能要两个呢？OK，我们说之前那叫路径吗？不叫路径，这次我们用路径的形式来画怎么办？CTx.REC不是RA，应该是REC绘制句型嘛，这时候有没有去绘制啊，没有，这叫路径，放到路径容容器里面去的，你看参数一不一样。一样的是不干嘛我干嘛，比如说从50这个一换一个100乘100的就行，换不换。不画，什么时候画，你得告诉我怎么画，那就是什么填充吗？走是不是我们刚是不是学的这feel，就这两个篇的结合嘛，对吧，还学要叫什么。

那个C什么吗吗，是吧，你那不就是我的结合吗。能理解吗？我们说干嘛，我们说矩形是不是有两种方式去画，一种通过路径形式啊，一种一种干嘛直接画OK所你这能不能过能过，哎，是不是还有一个线的帽子。看吗？帽子的意思吗？这是什么鬼？这个这个没用过啊，这个很重要，我们来看一下。啊，因为我们最后写刮卡的时候用的就是它。OK，比如说干嘛路径吧，零五。嗯，叫线是不是跟是不是跟线有关系的，OK，能填充吗。能填充吗？不能，现在是跟线有关系的，那怎么办？

Deep pink可能有点辣眼睛。改成。OK，我看CTS什么，我画条线吗？两点确定一条线段。是不是啊，可是线段这两头我们其实可以控制的，怎么控制啊，Ctx点人。Come，等于什么看它它看它什么知你看线段的末端以方形结束吧，走你我让你移方形结束，我们是不是现在就是乙方乙方形结束了，看有什么区别。有没有区别，没有区别是吧，再来看。还有什么以圆或者呢，你看这个是不是还是乙方方形结束啊，来看一下周引乙这个也是乙方形结束啊，那那这两个方形它有什么意义啊，它有什么区别。很明显这个方形是不加上去的，它在两端加了一个正方形。

那没讲，那当然还有一个什么。肯定圆的意思嘛，走，你大家看跟我一开始比，是不是在两边加了两个反啊。你们讲切记这是往两边加的，懂吗？OK，那这个API应该比较简单。是不是OK整理咱们再来看好，那讲到这一块，这些API能不能记住。问题不大，比较难的，就这个怕其他的，其他的比较简单。是不是啊，OK，那以后看到这些这些API必须得知道他在干嘛，懂吗？那下面加两个比较难的，1PI，一个叫C，这两个有没有用过。应该有用吧，是吧，我们来看这个C有根知道。