12_尚硅谷_h5_canvas-变换.wmv原创

OK啊，那我们上午讲的一些开发斯的一些基本的API啊，以及我们在开发编码时候的话，一些必要的一些就是呃思想跟技巧啊，那么来看一下，下午我们再来讲讲一些API，那主要讲下什么API呢？我们来看一下。OK啊，那这一撇肯定比较重要啊，好，我们看一下我们什么讲看当中的。变化。OK啊，大家想想，现在我说开va斯，我们说一般都说开va斯动画开发动画吧，啊，没有变化，何谈动画。是不是没有旋转，没有这种什么就是缩放啊。呃，跟位移的话，是不是我们说动画的效果就会干嘛大打折扣啊是不是，所以说变化其实是我们看过当中比较重要的一节吧，OK，那大家想想我们说变化，我们学过CSS3里面的变化吗？那C3的变化能用在开发支撑上吗？啊，我们说变换是是让画布去进行变换吗。不是，我们得让画布里面的图像进行变换吧，是不是，可是我们又没有办法通过CSS选择器选中到画布里面的图像吧，所以说画布里面图像是不能使用到我们C3的变换的。

能不能理解啊，而且我们画布里面的图像也是没有办法去添加事件的。因为你没有方式可以获取到它，它本身就不是一个多节点，开马斯这个画布是不是个多节点？Camera画布是不是多姆节点，是画布里面的图像呢？不是，你是没有办法通过CSS或通过GS的一些什么获取多姆结节这种脚本干嘛拿到看里面的。图像的懂不懂，那我们还是一样，我们看发自的变换得我们开发是自己的啊。API啊，它提供了三个translate root跟K啊，没有斜切啊，因为他觉得斜切比较激烈嘛，啊，所以没有斜接，我们来看一下OK。

好，那我们来讲一讲一节比较重要的CTRLC啊，这个基本法过来吧，CTRLCCTRLV05。变化OK，那开的变换其实是跟我们之前讲的变换是不一样的。变化，OK，这里。好变换好我们来看一下，好还记不记得我们上午讲过一个叫做呃C啊C跟那个到我们说save跟是不是去干嘛，Save是保存当时你整个图像的一个状态吧，是不是OK，那我们可以来看一看啊，那具体这个C物到底保存哪些东西，OK。好，我们来看这这个是没有，大家去看吧，就是C5是开发是2D API，通过将当前状态放入站中吧，保存开发是全部状态的一个方法吧，保存到帐中的绘制状态有下面部分组成，第一个到前变化体制。

第二个当前的剪接区域，当前的虚线列表，以下属性值是相关的属性值。这是不是都是我样式相关属性是画线的颜色啊，填充颜色啊，线的宽度啊，线的两端的形式，线与线连接出的一个形式是吧，这些样式我说都会保存那个状态状态里面去吧，还有一个很重要的是什么？变换矩阵也是等这两个，你们可以干嘛忽略它，因为我们用不到，等不等，可是变换矩阵跟我们这个样式相关的东西都会被我们C跟据道说操作到。能理解我的意思吗？OK。好，那我们来看一下这里。好，比如说我来写个变化。好，呃，大家看。现在我这是个最基本的画步吧，是吧，这应该没什么疑问了。

是不是这要有疑问啊，你给我出门左转左转再左转啊，OK。等你OK，好，怎么玩？看现在怎么让一个东西去产生变化，我们说现在我们学的所有的方法，除了get cons都是在我的。画笔身上的是不是OK还是一样干嘛？Ctx点什么？啊，我们是不是有一个叫什么圈子，你可以把它想象的就是一个样式操作。就跟那什么feel stylele，那feel style啊，什么什么那个什么strict style啊，还有什么一样，懂不懂你就你就认为自己在在做一个样样式做做就可以了，对不对，相当于再写一个C，再再写一个C3的变化嘛，不过通过GS脚本的形式嘛。懂吗？OK，我们说它等于什么？等于什么？A，不对，这是这干嘛说它是一个什么。方法吧，是吧，OK，方法里面跟什么。

XY吧，好，我们先介绍全的方法，它用来移动开的原点到一个不同的位置，它是用来谁的移动谁的。开马斯的原点，我们说我们是不是上画矩形啊，画线啊，都是XY偏移量的，这个偏移量是不是称当于那个原点的，好，全实力的XY就是动那个原点的。等等，OK，比如说看一下。好，比如说干嘛，我说50周，你50是不是这个时候再来画圆C，哎，下面我是不是要去画路径了，CTS点什么begin pass OK，比如说干什么来画一个ctx点是不是？比如说从零，零这个位置的画100乘以100，好们来答，这个矩形到底在哪？矩形在哪？在五十五十这个位置吧。

那么讲，因为原点在哪了？原点在这个位置懂不懂，也就是说你这边参照的这个参照物从这个圆点变成了这个圆点。能理解吗？这就是我全的一个作用，跟我们C3里面全的一样吗？不一样啊，OK，这里我们再来看好，比如说现在我在C3里面，如果你写两个全次方为全的X100，最终这个东西都底跑，就是我干嘛，我在C33里面我定义两遍。全全的，最终这个元素跑多少。我这是在里面，我这样写啊，圈form圈X100PX嘛，我写两遍，最终好多。还是一个偏覆盖操作嘛，是不是啊，切记在什么开里面是一个累加操作啊，也就我这么写，最终应该跑。

一百一百。这里你看比前面是不是多了，是不是相当于我们干嘛写的什么。CX点什么一百一百，你看一下这里。咱俩是不是一模一样的。能解吗？切记开当中的变换是累加的，好这个能不能理解啊，啊这好我们看这时候我们讲什么。关于是吧，TSLA圈是不是还有什么。肉体的旋转嘛，CTRLCCTRLV02。RO是不是OK，我们说这个方法直接是一个参数旋转的。角度接受角度还是弧度？

OK，它是顺时针方向，他也。弧度为单位，它接触的始终是弧度，是不是OK，它也是。累加的OK，他按照什么，按照我们这个之前的。原点转懂不懂，它转是按照了吗原点转的，所以说你这个圈子对F对这个旋转会不会造成影响，会的，因为你会改变原点的，懂吗？OK，所以你们来看一下。好，比如现在我什么都不想是吧，走你，我说干嘛，RO什么转一个。45度是不是OK？我们说不能这么写吧，应该怎么办？乘以点派。除以一百八是不是，所以你看一下这个时候这个矩形画在哪，是不是画到这。为什么画的这转了嘛，转了45度嘛，你还是从零零这个点开始画，转了45度的话，相当于我们的轴应该什么样的。

是不是这样的，OK，所以说我们说往下走多少100，那我是不是从这个方面去走100，相当于我现在的坐标轴，它长什么样。斜着的。这是一根，还有一个呢，还有一个在这懂吗？能不能理解，OK，那我问大家，如如果前面我来个ctx点全是。50 50好走。好来问大家，你这么走，比如说下面我再走个一百一百。好了再讲。他应该怎么转？他应该做成什么样？什么呀？他按照哪个点转50 50这个点。

是不是按照这个点转多少度，45度相当于你可能是这样的，OK轴，你你按照这个点转是不是啊，OK，你过来一根轴转45度是不是转是不是转成这样。是不是你你可能这样的嘛。你本来画的话应该是干嘛，哎，不对，想想你本来画的话应该是这样的是吧。这根轴嘛，是吧，那你可能现在，那你可能现在怎么样，让你转个45度。是不是这样嘛，转过来转到这边。跟我这个图形一样吗？我这个图形看到的面积应该变大了。是不是啊？那么讲我们来看一眼最终状态什么样。能理解吗？能不能理解他成这个样？不能理解，相当于现在这根轴在哪？

在这，这是哪根走廊？懂吗？我不是让他走动。我向他走五十五十嘛。是吧，那也是相当于，其实我让你走50 50在哪。啊，一开始我的坐标就是它长什么样，是不是这样的。出去。出去。是不是折五十五十，这个是不是原点啊，是不是OK，折五十五十，其实我一开始坐标就应该是那样的。OK。这个才是我们整个坐标轴。是不是往里走五十五十嘛，走50走50很有可能点在这边。是不是OK，然后干嘛。旋转度吧，是不是旋转度，是不是把方向变成这样。坐标其实变成什么样了？是不是这样，是不是OK，还有一个怎么。

收就已经变成这样子了，OK，然后我干嘛走一百一百吧，你看是不是从这边走100，从这边走100干嘛，然后是不是在这个点开始画，相当于我往走100走到这，走100走到这，这个点在哪，是不是在这边。你看过来嘛，一百一百这个点嘛，是吧，开始画一个100乘100的矩形吗？那你画100乘100矩形的话，是不是也是按我这个两个轴的方向画了，那我最终是不是画成这样。能不能理解啊，OK，那这里，那如果这样。两个图形不一样，肯定不一样，这里是这样的。其实赚钱的样子也不一样，一样的，只不过你们看到的东西不一样了，为什么？你看一开始是不是这样的，原点在这边是不是OK，那其实它这个走线就长，这样是不是还能走呢。

车子过来，然后我让你怎么走的动远点，先走五十五十是吧，走你走50，走50，那我肯定在。是吧，这个点原点是不是在这了，然后呢，然后找100啊，可能到这再走100肯定到这，那你就是从这个点开始画。这个你开始画矩形吗？有没有解，图形其实长得是一样的，只不过你们看到的面积不一样。懂吗？相当于这边的话，其实我们是相当于干嘛，你走了一百一百的话，其实你最终转的话也是按这根轴在转。是吧，你这样吧，你你可能一开始是这样的吧。肯定是按这根轴来转嘛。是不是？

能理解我的意思吗？OK，你如果再按照我们这边的话，其实你是按照这个来讲。是吧？这样在转的吗？能不能理解我的意思啊，OK，我们说干嘛，这是不是先位移跟先旋转都是不一样的，那么讲，那这么写的话，其实相当于我在后面写了一百五行不行。行吧，是不是一样的周年，你看是不是啊，可是我们说如果按照你刚刚这种写法，这个写到上面的。是不是OK，比如说这个写到上面这边走100个是不是走成什么样。只能这样对吧，OK，这个跟你走一百五等价吗。不等价吧，懂吗？这是完全不等价的。能理解我意思吗？OK啊，能理解就可以。能不能理解啊，OK，好，那还有什么。

说法是吧，OK，来CTRLCCTRLV03。用来做源码。说法什么，是不是我们来看这个好。好，刚刚那个旋转也是累加的，懂吗？也就是说刚我在这边转。啊，我这边转的是不是是转什么，你看转45度是不是转是不是干嘛转这个死样再来看干嘛。啊，我先赚22.1，再赚对22.9是不是一样的。也是45嘛，你看是不是一样的。这个能不能理解啊，啊，它是累加的OK。好，那这个缩放呢。啊，缩放就是按照谁来缩放。

是这样吗？是吧，你看缩放接触几个值，两个值，一个XYXX上的缩放，一个是Y产品缩放是不是OK，比如说干嘛OK。点五再给点5T来看一下。走，你你看如果不给。一百一百嘛，OK，如果给了。是不是就上去了，为什么上上去了，你这边不是有偏移的吗？啊，我们说缩放到底是一个什么样的原理，缩放到底是什么呀？比如说我们放大来，我们来说说这个放大到底是么样原理，放放大了到底是什么东西。啊，我们来说一下，一个是放大，一个是。缩小啊，这个跟我们后面讲移动端的时候干嘛，哎，这个还管理还蛮大的，那我们来看一下放大跟缩小具体是一个什么样的过程。

Pony。比如说现在我是放大。好，走你。嗯，这是不是没了，比如说给个零零吧，呃，给零你肯定还看不出来，是不是给个50 50只你比如吗。放大是不是放到这么大，是不是我问你我放大整个区域里面，区域的面积有没有变。没有变吧，是不是，而且这个区域的CS像素的数有没有变，CS像素的个数。对，你看我整个区域是不是300乘以300。是不是好问你，我现在整个物理尺寸有没有变，没有变，为什么我看到的东西变大了？我放大了吧，我放大的是什么CSS像素的面积。

是不是是不是我放大是不是就是为是为了能看到，为了能让一个元素变大，首先你这个元素是不是永远是100乘100。它所包含的三次相同的个数有没有变？我刷一下啊，我没有说放是吧，没有说放的时候这个黑颜色的框是不是乘100乘100个三像素乘一个三给我把它放大了，我问你。我把它放大了，是不是还是100乘以100个三等加数个数。个数有放大吗？有没有？我们放大的是什么CSS像素的什么面积？是不是我是不是放大的是CS像素的一个面积啊，我说放大并不是增加它的数量嘛，只不过把单个CS像素更大了。

是不是OK也是什么，那我问你啊，我们说放大的是干嘛，放大C像素的面积是不是OK，我说区域内CSS像素的个数变多还是变少？也就这个区域内。这个区域内本身我放了多少，300乘以300个CS像素，现现在放了多少个？个数肯定要变少。个数肯定变少嘛，是不是啊，不管你少多少，肯定是肯定是变少是不是就放大的是三三相数的面积干嘛。区域内现在个数变少。

这这个能不能理解，是不是OK，那我问你，那你其实他看现在我50乘以50。50乘以50个SS相数吗？你看这个距离是不是也变大了？是不是你看如果我没有放大呢，50乘以50这个距离是干嘛。比较短的，也就是它占据的，问你这里面有个很重要概念是什么？你要知道CSS像素是一个抽象单位，是不是它所占据的，实际的尺寸是不是可能会产生变化的。跟着你的缩放跟跟着你的缩小跟放大，这个336，那个实际的尺寸会不会产生变化。他所占据的实际时有没有产生变化，是会产生变化的。能理解吗？能不能理解，而且我现在这个放大是不是干嘛放大了你整个区域啊。懂吗？

那们能没理解我意思，那我说缩小呢。干嘛缩小CSS像素的面积吧，区域内三三项的个数干嘛变多嘛。等等，可是你占据的实际的尺寸是不是变小了？懂吗？能理解我意思吗？能理解啊，不理解，好好思考一下，OK。只有你，那比如说现在我干嘛，比如说变成原来的点二，点二是不是变小了，只有你，你看是不是变变小了，你看这个50乘以50这个。50乘以50，他所占据的实际的尺寸是不是也变小了？能理解我的意思吗？啊，好，那这就是我们说什么变换啊，Translate懂不懂？OK，那我们来做一个变换的实例。