13_尚硅谷_h5_canvas-变换实例.wmv原创

OK，那我们来写一个变化实例，CTRLC好作为什么样的变化实例呢？大家可以看看。好，就做一个这样的东西啊，不过我们把我们把它放到什么。中间来，全部让他居中。对吗？他一会儿变大，一会变小，还带着什么？旋转吧，啊，这其实在我们C项里面比较好做啊，看里面还是有点难度的，我们来看一下。怎么做？把水晶给它打开。好，然后把这个关了是不是好，我们来个变化实例，根C，根B。OK，零四，我们来做个变换的示例，好来看一下。好，我把全部的其他东西先先给它干掉是吧，好，大家看现在我我的画布是不是在这边啊，好，我单位里面也要有个元素，一会儿放大一会儿放小吧，是不是OK，来看一下现在我是不是要去里面把一个元素画到中间来，是不是OK，怎么画。

怎么把一个元素画到它的中间？想想待会你转的话，大家看转的话，你看你是不是要沿着这个元素的中间转，是不是放大缩小，是不是也要沿着这个元素的中间去放大缩小，所以这个原点最好在哪边。在这个元素的中间嘛，是不是OK，来看我们怎么做，首先上来要干嘛，我来画干嘛，CTx.begin pass，是不是我啥都不管嘛，是不是我说ctx点什么。PH。是吧，比如说干嘛，我们现在整个尺寸为多少？300乘以380，你想让他去中间该多少？我画个100乘100的呀，这个片量多。

一百一百是吗，是吗。不是吧，看一下你诶。一百一百自己占了50嘛，差不多是吧，正好吧，他在中间嘛，可是的原点是不是还在这。啊，其实是有问题的，是不是OK，那我们不能这么画，我们先来调原点吧，我们把原点调到它的什么中心点来吧，那怎么办？C、什么全是多？一百五一百五嘛，我整个是三百三百嘛，我找一百五一百五是不是OK，这个时候原点是不是到了中心点了，这个时候你在画这个矩形的时候，前面平量是多少。离还是短？负十负是吧，是不是啊，你看如果不写负十，负十你看是不是画到这边来了，因为你是按照按照什么这个原点再往下走的吧，是不是OK，那我们说了这边应该变成多少负50，负50找你来看一下。

哎，是不是就过来了，是不是，然后我们说干嘛。你得转吧，是不是啊，怎么转？OK，我们说是不是我们用了变化了，OK，那记住干嘛，CTXD c5项是不是最终CTS好吗？点到一下是不是状态要给它通通好吗？只不过我们说现在我们是不是得让它转起来，怎么才让它赚起来。比如现在干嘛转，我在这边写转ctx什么的是吧，比如说他转个45度，怎么转乘以ma点。

派除以一百八是不是看他怎么算？是就直接赚个。45度啊，是不是，那我说你要在这边不停的转吗？那怎么办？定时器嘛，哦，我们现在在写是吧，我们不是在写是吧，是不是你干嘛，我在这边怎么办。C特吧，来一个方形走你是吧，比如说我什么，我们说人眼接受的最好的频率是多少？一秒钟60次。是不是，所以你这里面问你现在是不是一个定时器啊，你这个save概率是多少，我问你是不是在他之前去执行的。这个人这个这个渠道是在他之之前就执行的嘛，是吧，那我干嘛，我这边什么法重新来查ctx干嘛。干嘛ctx点？

Pass CT点是吧是吧，那我问你现在一旦我在这边问你，我在这个定时器里面，你这个还有用吗。有用吗？有用吗？没用了吗？你吗弹掉了。是不的，你弹出来是什么，弹出来是第三行的时候一个状态啊，我这个原点还没动吗？懂不懂是说我在这边干嘛，这个原点应该到哪。哪个位置啊。这是不是你要转的那个中心点。200 200。想想。不是应该还是多少，还是一百五一百五。中心点嘛，520这个原点始终在什么。我的中心点嘛，是不是那不是150。

吗？只不过你现在这种写法的话，大家想想是会有问题的，你要么怎吧，你在这边你不想写了，你应该怎么办，这样写是不是现在相它相当于是个全局边是不是啊，能不能理解啊，OK，那这个时候在这里面转我们说个么。就没什么问题啊，C点干嘛。算什么？是不是要不停的转，那怎么办？加加嘛，我外面Y一个什么flag等于零吗？每次进这个电视机的时候干嘛。干嘛加加嘛是吧，OK，那怎么办，每次转的一个度数呢。乘以点派除以100是不是？

刷一下诶。那为什么没有动啊？看看。Flag林。佳佳。每次芬兰克这边都会去加加，这个没问题啊，是不是啊。可是我感觉他没有钻，看有没有报错。没有报错吧，来看一下是不是我们哪边写错了。想想开了一个定时器。每次转。每次转一度啊。对吧，翻了个加加每次转一度嘛，是吧，可是他没有转，看哪边有问题。想想每次，想想每次我在这边是有是吧。

是不是每次次，每次一次。我是什么在这边。加这个有没有问题啊，有问题啊，想想现在他他他不会转嘛，你每次进来的话，你这边是不是去保存一次，做完干嘛弹一次啊，其实你是不是永远拿到的是对外部的状态谈一次。你看我下次再进来的时候，是不是还是你原始的状态啊，相当于你写在这里有用吗？现在它有没有起作用？没有起作用，因为你每次C过来，然后干嘛，你知道了吗？状态是又被你寄回来了是不是，而且我们画在哪画的。是在外面画的，是不是，这这这就有问题了吧，是不是，那怎么办？我们说你在这边，我们说这个画应该应该放到哪边去画。

放到里面去画吧，是不是啊，OK，走，你这样行吗？也不行，看算啥。你这是啥？你看怎么画成一个圆了？你看是不是我没有亲啊，没是不是没有亲啊，每次进了，那每次进来我是不是还得亲一下。怎么清啊ctx点什么肯定啊，让什吧零零这个位置吧，清什么整个画布的一个高宽吧，是吧，你点外事看点什么看什吗？我把整个画布全部清掉吗？这可可啊，来看一下这个看我看。你看你看我们氢是不是有问题，为什么在这边氢是有问题的。

啊，因为我们的原点是被我们动过，原点永远永远，永远在哪。一百五乘以一百五是吧，你清的话，永远清的是这百上面是清不到的，懂不懂，好，那这个问题蛮大是不是啊，那我们说我们这个色这种设计有问题。你把它放到最外层，那就是有问题的是吧，那怎么办？先把它干嘛。放到这个C5底下来，我先不管吗？是不是啊，我这个地址我先不写干嘛，你这个C5跟这个C5跟那个道里面的话，你就是去换那个句型的是不是，那我怎么办好，我们说我们这个设计问题了，很明显发现你把这个东东西放到C外面去的话，会对我们之后编码造成影响了，是不是，那我们就干嘛写一次C5C一次。你是道意思吗？是不是这个能不能理解好，怎么写，首先还是一样，现在上来是不是干嘛是现在上来是不是什么都没有，你先干嘛，先得去给我画个剧情吧，C什么。

非让什吧，说零零这个位置给我开始画，画一个100乘100的矩形是不是？可是我们来看这是画到哪。是不是换到这了，我们说因为你这个基点是一百五乘一百五嘛，所以说我从一百五乘150这个位置去换嘛，OK，我们说干嘛，你得到中间负50负50。是吧，OK，然后这咱们就不管了，这是我什么第一次去挂吧，然后不要让他做旋转，OK，做旋转在哪做，能不能在他们中间做。能不能？或者说干嘛，我就压根不用你了，我下面直接开个什么C，开个定时器嘛，是不是这相当于我去画第二个图形，这个图形会叠上去的。就这第一个图形我还用吗？不用了，你们看到的旋旋旋转的效果都是每一次干嘛叠上去了，只不过我把上一次给清掉就可以了，懂吗？怎么办？上来先干嘛先清除吧，可是我们说干嘛你先得。

SEO。是不是问你上来我在这边清的时候，它是按照哪个原点清呢。零零的位置吧，因为你已经被弹出来是吗？是吧，那怎么办，肯定啊。干嘛嘛，零零这个位置去清码，请什么请你开的一个整个画不嘛开点。和什么点C什么VS斯点这个能不能理解，OK就上来次报不清一下吧，然后清完呢，相当于把我这个图形擦掉，你看我是不是直接给给你擦掉了重新再画嘛。每次画的时候让他转嘛。有没有理解啊，OK，那我在这边画的时候应该怎么画，一秒钟还是68，咱不管吗？是不是OK，画的时候问你。

CX么？是这个。一百五一百五圆心这个位置转吗。是不是啊，OK，我们说继续在这上面去画什么。画这个矩形是不是，只不过画矩形的时候你干嘛。得是赚的是不是啊，那怎么办。CTS点什么？肉体的嘛，是不是，你看我这边是不是去画画。句型的，那最好有个什么。这边也是要CTS点什么，Begin pass是吧，OK，我在这上面也干嘛，CTS begin pass，这里面讲，只不过画之前我说你得待会应该要转的话呢是，至于转多少度，我说每次进来时候干嘛。Flag。加是吧，怎么办？

干嘛乘以点派除以180。是不是就可以了。是不是就可以了，能不能理解我的意思啊，这个时候每一次转的flag的度数是不是都是渣渣的是不是，而且我问你每次进这个循环进止器啊。五对干嘛相当于是干嘛，相当于你这里面东西干嘛，会对下一次产生影响吗？不会，也就你第一次旋转一度，第二次旋转两度，第三次旋转三度嘛。是不是上次肯定要清掉的？是不是相当于每次进来的时候，我把这个画幅上面所有的图形给你清掉，我重新去画，至于偏移多少跟上一次有关系吗？没有，我就是只是什么加加的。能不能理解我的意思啊，来看一下。行不行，是不是就可以了。

是不是啊，文章都转了，转的稍微快点怎么办？那这个就稍微调调嘛，调成100嘛。教你。100啊，这个比刚刚要小是吧，你。再快一点了，我。是不是就快了？怎么讲你干嘛，我最好不写是不是？是不是很快了，然后干嘛一边转一边要。放大，放大是不是也是要按照什么。这个点放大的是不是我完了它干嘛，它放大完了还得回来。还得说没了再出来。说没了再出来吧，是不是我们说光让它放大好做。怎么办？怎么放大？怎么呢，是不是也在这个地址题里面做。在哪个位置啊，是不是也在这个位置。是吧，因为这个位置你看基点是不是干嘛是调正的是吧，我是不是也在这边去旋转。

啊去什么放大写在这个旋转上面，跟下面应该没太大关系。这个旋转不会影响我的放大吗？是不是啊，除非你产生位移，可能对你这个。原点可能对你这个原点造成。影响吧，孔孟，我们说这边旋转跟说话的位置应该是可以互换的，是不是？OK，我们说干嘛你要转吧，那这样我来外面定义两个变量，画一个X scale等于零，好，我再画一个什么呢？嗯，Max等于零。好。嗯，想想。不是max画一个什么呢？怎么再来起个标志位呢，叫flag吧。弗莱格。死掉。教你好看我干念什么，现在我是不是定义两个变量好，看我怎么去用这两个变量好，我就上来干嘛，上来写一写好耶。

啊，可能稍微有点逻辑，大家注意一下，如果这个。嗯。想想怎么办。如果这个是。好，等等于100了。怎么办，我让这个flag。等于负一，OKL，我让这个flag等于。1OK，每次过来的时候，我这个。干嘛加？等于好，我在干嘛，我这干嘛在干嘛。好，我说上来你这个是个为零吧。会会进这个判断吗？不会，我说这个把这个flag制成了一吧。是不是制成了一之后，每每次我是不是干嘛加等于一，加等于加等于啊，知道加到谁加到100，加了100之后，让这个加格变成负一，是不是变成负一之后。

OK，变成负一之后干嘛，这边是不是开始减了，好像有问题啊，是不是，我这边是不是还得控制一下。是不是我的目的就是什么，让你这个100是最大值，我这边不是干嘛累加吗？加加加，我是不是每次加一，每每次加一啊，加到100，我让这个分量变成负一，每次减减减减到礼貌。减到零的时候，在那个负加格吗。加码是LL什么？等于零的时候。是不是等于零的时候，我让你这个flag变成一嘛，在这边我每次不都加去加这个flag嘛，是不是我们干嘛点log这个flag，我们来看看。

这个什么调嘛，是不看这个调OK，第一次进来这个词应该有多少。我感觉太快了。干嘛？我们说一秒钟吧，是不是只。一上来说1234啊是不是OK吧，稍微快点100毫秒周年啊，一二三四五六七八九十是不是。走你啊，走到100岁应该自动降下来。走了多少。看到。你看走到100的时候自动降下来，说明这个值现在是空在了一到100之间。是不是一直控制在一到100之间嘛，这就好玩了，这个值一直控制到一到100之间，那我干嘛ctx点什么。Sca是掉多少？死，死掉。

应该要除以，除以一下，除以一个五是不是一到100，一到100之间吧，那我除以50是不是永远是1/50到二之间。能不能讲？我这个高的值是不是一到100啊，我这么一除的话，是不是干嘛永远相当于是永远零到二之间。应该它本质上应该是1/50到多少二之间嘛。不是1/50，想想我这个值，这个值是。是多少一到100嘛，是不是，那我是应该多少1/50~100/50，哎，是1/50到二之间吧，是吧，来看一下这里。说一下。是不是我是不是我们要的那效果。只不过我们太慢了吗？

这里。是不是我们想想想象的效果OK干嘛啊，我都现在有点怀疑自己。这不是我们想象的效果吗？不是跟我们之前的效果一样的吗？只是我们稍微快了一点嘛，对不对，好，这里面需要大家注意什么。第一个，你要明白每一个变换操作到底是什么，而且还是那样，都有同步的思想。是不是啊，虽然说我们这个定时器是异步的吧，可是你要思考的时候，这些变换啊，原点的位置啊，一定得是同步的思想。是不是这样的那么解，而且我们是不是用了这个C分么。啊，这个DEMO可能还是稍微有点难的，是不是你能不能把我写的每一行代码，这里面每一行代码都。不能缺吧，是不是搞清楚这里面每一行代码到底到底在干嘛，懂吗，OK。