11_尚硅谷_h5_canvas-曲线.wmv原创

好，我们说刚刚说我们做了一个OK，做了一个签名啊，现在我们说大家想我们画到现在是不是在画矩形画线啊，有没有画过曲线啊，没有OK我们来干嘛。绘制曲线，曲线首先最最经典的曲线圆吗？是不是圆？不是最最经典的曲线吗？怎么绘制圆，我们来看一下。教你。怎么会是圆，你们有没有画过圆画过是吧？你看我们之后要要开去写什么呢？不不不不表示圆是不是还有呢。完蛋，我怎么找不到？我们说过，我们开放是写气泡的吧，记不记得气泡是不是圆？

是不是圆，这些气泡都是圆啊，所以我们来看下这个圆应该怎么去画，OK，这里怎么画圆API简API最简单了是不是，那我上课讲这个API，我晚上我都不用看是不是，就是上课讲一些有有逻辑的东西的话，那干嘛得准备好久是吧，我来看一下我们这个开发是怎么去柜。啊，这个角度转弧度就不说了啊，叫什么阿吧，XY什么圆心，这个代表什么。这个是什么鬼半径嘛？画一个以XY为圆心，以这个玩意为半径的圆吗？是不是这个呢？代表起始角度到终止角度是不是最后一个代表是逆时针还是顺时针？API会不会读会，那我们说这个叫什么。对，叫远啊，没法反驳，确实是圆，是不是OK啊？这个叫路径吧，我们一直在换路径，现在懂不懂OK，走你怎么玩？

Ctx点什么？Begin pass，再来路径，OK ctx点什么二是不是？比如说以什么100 100为圆心，画一个半径为50的一个圆是不是？OK，还有什么参数啊？从哪开始从哪结束吧，OK，这个叫正轴，这个叫。零度90度，这没问题，零度到吗？这又能叫零度，又能叫360度啊是不是，那我就画到多少360度呗，是不是问题这边传这边看起始，起始度数啊，那就是什么零到哪三百六是不是OK传角度还是长弧度啊。没说是不是OK，我们说嘛，处代表逆时针，For代表顺时针嘛，默认其实是false，我们来看一下只有你。

是不是一个圆看。没有为什么，这是路径啊，CX点的吗？这个吧，我们画条线嘛，是吧，走你过去。是不是一个圆是一个圆吧，OK，怎么看它是顺时针还是逆时针呢？现在我是不到360，我的二百七二百七看一下默认是不是。刷一下也。二百七说一下什么鬼，好像没用吧，是不是？来我们说这角度吧，乘以点判除以180，看他报不报？是不是从这边换过来了顺子？顺时针嘛，是不是，而且这里面到底传的是角度还是弧度，弧度问题是传三百六还可以。

刚刚不是没传吗？没没传是不是默认话语？默认没话吧，是不是来个零来个什么，比如说111是不是这个来看一下默认是不是统一画圆啊。是不是啊，所以说刚刚是瞎猫撞上号子，是不是必须写什么五度懂吗？好，两百七干嘛乘以ma点派除以180，这个能不能记住？走，你你看是不是一个半月光，是不是再来看一下。再来看下，比如说我画一个啊，画一个叫什么来看我说Ctx.move two是不是先到这个点是不是，哎。问你两个是不是路径啊，都是路径嘛，那肯定要连起来。

是吧，你看我画个扇形。上去吗？多90度吗？是不是就差合并了吧，怎办？我们说个是不会自动合并了吧C么。是不是上来了，是不是啊，OK啊，我现在你们知到底有没有学过看法，好这你那这样是不是就可以了，OK，那看这个是不是我们画的是一个圆的画法，这个一篇应该能记住啊，OK，比如说干嘛我问他是不是还可以逆逆时的。早年。你看嘛，从这边出去嘛，走你因为要pass嘛。是吧，因为我先摸出了嘛，干嘛要出来到点的，最终要pass的嘛，是吧，你看我不我不去怕。是不是就干嘛出来了，这个讲好，这叫画表吧，好，当然还有话叫什么阿啊，给定控制点和半径画一段圆弧是不刚刚是不是我们用来画整个圆的，也可用来画半个圆或者画3/4个圆吧？好，这个是真用来画圆弧的，看这个方法怎么用。

零对吗？AC阿阿吧，是不是来看阿怎么玩的好，还是API吧啊，API只是需要记记是不是都不用什么动脑子来看一下这你怎么玩。这个目我先不要了，是不是可能我留着，是是这边我去写A篇嘛，是他说干嘛什么阿吧，是不走你哎不不不不能走阿，什么几个控制点啊。两个控制点和度，我是不是两个控制点吧，还有吗？半径嘛，是不是走你看两个控制点半径吧，比如说我一百一百上一个控制点吧，再来200 200也算一个控制点是吧，周你半径我给个多少，给个58。

这个可不可以啊，看给我发出什么东西来什么都。没有，想想你能根据我问你，你能根据两个点去画一段圆弧吗？起码三个点吧，我才能画一断圆弧吧，你给我两个点，我只能画直线啊，是不是初中数学吧，那么讲你必须给我整三个点吧，OK，现在我是不是两有两个控制点啊，其实默认还有一个控制点，我们要通过什么模糊图来整。懂不懂，OK，走你。OK，比如说我摸出什么，嗯，五十五十是不是现在五十五十一百一百两百两百是不是还是一条直线啊。

走你你看是不是就就给你出来条直线，没有任何的圆弧的吧，比如说这是不是我的第一个点，这是最后一点吧，当初这个点往上立的话，是不是就可以出来条圆弧了，是不是当初这个点，比如说现在我是一百一百吧，应该改成多到这边应该多少200。200在这200吧，这边是一百一百吗？250吗？是吧，OK那对么，200第二个点嘛，掉去250走你来看下。来，你看，咦，这是这这是怎么玩的。这怎么了？现在我们来看我们是不是close pass了，我不要pass，你看那就不会去合并这路径吗？来看一下我们是不是这边一个点50 50还有一个点在哪。

段，我们把这个几个点干嘛描出来，行，OK，我们先瞄吧，首先干嘛C点吗吧，首先一个点是五还呢吧，OK learn two 200。吧，走你200是吧，在然后呢，在人多多200是不是这几个点，这几个点我用现性给他干嘛。连起来是不是OK，然后我再来画图形，好，这个图形跟上上面图形干嘛，没关系，路径清掉是不是这个能能理解啊，好，我也不知道你合并了是不是啊，来看一下怎么来到，看见没有。怎么玩的？第一个点在哪？

第二点。第三个点。是不是会有一个角的来看，我把这个点往往上面拎，拎到这边应该多少。你这边3000嘛，宽度300嘛，是不是这边干嘛，第几个零点，这边第二个点嘛，是不是3000第二点吗，300。零找你。现在能不能有点感觉了，他其实就是首先三个点肯定会形成一个角。是不是啊，然后我干嘛搞一个半径为。50的圆慢慢往这个角里面靠，正好靠着是取这一段圆弧。能理解吗？OK，好，那我们说after总共有几个控制点？阿克方法需要几个控制点啊，三个，三个才能形成一个角吗？是不是形成一个角的这个我们说还需要一个半径吗？这个圆弧的半径能不能确定？

永远是一样的。是不是圆弧的半径有问时间吧，我已经什么指定死了吧，50吧，能理解啊，好，这是一种形式，我知么，一个是二方法，一个是二方法，这两个方法能不能搞清楚啊，OK，再来看，而且我们说必须得是什么弧度。懂吗？那再来看还有什么方法？好周，你贝塞尔算不算曲线，算也算曲线是不是，我们看贝塞尔里面二次贝上尔三次被吧，二次贝塞尔几个控制点。三个控制点，这边写的两个就算一个。三次被几个控制点？四个控制点都是控制点吧，你看这个二次边上三次边上有没有指定半径。没有来看一下他们跟阿不一样的地方就是没有指定半径，也就这个圆弧的大小是没有定死的。半径是被定死的对吗？我们来看它是怎么玩的。

零三这什么二次啊贝。二次被赛。被。哪个背七塞尔走你了？OK，怎么怎么玩的啊。走你CTRLC是不是整整几个控制点啊，OKOK，现在我有几个空点，是不是不需要半径啊，是不是是不是还是这几个控点啊，来看一下走你。跟我前面是不是不一样呢？不一样在哪？前面阿方法半径是定死的，它是一个拿一个圆网往上扣的，这个圆的半径是定定死的。后面这个圆弧怎么出来的，你必须给我过我第一根最后一个点。这两个控制点必须给我过过这个控制点，最终这个是调整整个圆弧大小。

角度是来调整整个圆弧大小的，这两个控制点必须给我过。能不能理解，OK，这是不是这两个不一样的地方，你看它不需要碰这个。控制也吗？为什么？因为你的半径已经干嘛确定了，这是二次贝塞尔函数，跟我的阿函数不一样的地方，能不能搞清楚，能理解吗？OK，再来看还有什么？三次，CTRLCCTRL。零四什么三次被上，这零三次上多一个点呗，是不是我再to干嘛，我让你去三百三百行不行。可以吧，你管我呢，是不是去三百三百最终干嘛，他是不是再多一个点，三百三百是不是瞅一眼呗。你看问你这个这条点到这条线是不是一个直线啊，能画出圆弧吗。

画不是圆弧吧，没有脚吧，那那怎么办？首先我们知道前面是不是画了个半圆。这是前面三个三个控制点干嘛决定的吧？周年。是不是前面这一个控制点，两个控制点，三个控点所决定的问题，到你这边，你是不是一个直线啊，那我就啥都不画呗，我画不出圆弧啊，是不来看一下，如果我让这个点去哪。换一换吧，三百一百五是吧，我也不知道这个点在哪，看看吧，所以。下还是直线吗，是不。是不是，嗯，来看一下。照理这边应该有个圆弧来看。哦，我没有换是吧，哦，我这边没换是吧，是改成三次比赛了，走你。

CTRL，那我们再来换成300 300，看看它有没有什么反应，九点。哦，是不是有的，你看是不是这个点来控制这一段圆弧，这个点来控制什么这段圆弧是吧，是这个能不能讲，如果把这个点往前了，这个点是第第几个公字点。倒数第二个吧，我把他拉到这边来是吧，那应该是多少零三百吧，是不也就什么这个点吧，是吧，改成零跟300，你如果第二个点应该变成倒数，第二点应该变成零三百折你。哎，是不是看这条曲线是不是一个控制点，两个控制点在这边决定了它的一个。曲线的一个弧度啊，你看是不是它最终要过我第一个跟最后这个点的，能理解吗？这是二次三次变长的一个区别，能理解吗？啊，其实这种图形需要你去设计吗？

不需要啊，最终UI会给你参数的啊，你填就行了，可是你要知道你填的点是哪几个点吧，你不能人家给你给一个坐标，给你这些点你都不知道往你你都不知道往哪填，那是不是就稍微有点过分了。懂吗？OK，那这是我们讲的曲线，能不能讲，那上午其实我们就讲了第一个基本用法，第二个绘制曲形，第三个路径，第四个曲线是吧，所以说曲线也算什么路径一种吧，最最重要的是几个API pass c，以及我做开那个同步思想自己到底有没有。那讲那下午的东西可能会稍微比较的难一点啊，就是中午好的睡觉。OK。