21_尚硅谷_h5_canvas-像素操作.wmv原创

我们来看一个啊，比较重要的东西就是像素操作，那么这边我们API已经过到什么文本了，那像素操作比较重要啊，涉及到我们后面很多的效果，来看一下。OK，教你绘制文本，讲完OK ctrl c，再来贴一个CTRLB，好，你看开式的一篇是不是也很短？OK啊，叫做像素双数。好，比如说现在我有个很简单的需求。你要光打这个后字，我还看不懂它，OK，好来看一下，现在比如说我去画一个ctx点。认可吧，这个位置画一个100乘以100的一个什么矩形是吧？默认是黑颜色的是吧，那我现在想复制一份怎么办？我就想复制一份一模一样的是吧，好复制C个嘛，一百一百是吧，再画个100乘100的嘛，那我就吗，不是复制一个一模一样的吗？是不是啊啊。

没法反驳啊，可是我要的要求不是这样的，很有可能你前面这个图形我做了好多操作的啊，这个上面的像素点我都换过的，我要你百分百一模一样的给我复制一个，那你是不是把上面的操作你在下面干嘛做一遍是吧，那肯定肯定不行啊，是吧？那怎么办啊，靠我们开发的相素状作啊，到目前为止我们尚未深入了解开发泡真实相素的。原理啊，到现在我们学看学的是假的啊，OK，那事实上你可以直接通过image data对象来操作啊，像素的据直接读取获将数据显入到对象中，什么意思啊？开给我们提供了1PI叫做get image，获取一个包含画布场景像素数据的一该对的对象。

它代表了画布区的对象数据和拗口，听不懂是不是，那我们写起来来看下，比如说干嘛，我们说大家看我们现在是不是画了一个。矩形啊，我可以把这个矩形里面的每一个项数点的信息拿到，怎么拿。比如说我一个什么对I及image。Image就是图像的数据嘛，等于什么Ctx.get image data是不是怎么拿，跟你的位置一模一样，可能还要传什么参数。你看XYX码啊，你不要看这个解释，这个解释特别抽象，特别拗口，就是干嘛你的偏音量，你从哪个偏量开始，那多拿拿什么拿一一这个区里面说的下信息全部拿到，他等到来看一下走你我们抗收点，比如直接打个打个打个第八个吧，第一比LG节一样来看一下这里。

好十来刷一下是不是过来了，走你OK，这这里面我们先不看啊，以后这里面这个界面我们会来会有的嘛，一个个分析的讲，GS高级术作用于啊调用这啊OK来看一下你电塔给他。连进来OK之后，你是不是一个一般接争的对象来看它有什么，它有一个对塔属性，你看我现在问你，我现在拿了多少个像素点。就是我这个一，就我现在拿了多少个像素点，100乘以100，是不是我应该拿了1万个像素点，我肯定拿了1万个像素点。

是不是啊，OK，走你可是他看这个对台对象里面是几几万个，4万个是不是啊，OK，我们知道肯定是我们的四倍啊，4万是1万的四倍，这个能不能懂啊，能懂是不是能懂就能听好来看这个had跟外么什么宽高，这个had跟Y其实代表的是你拿的这个区域，横向上面有多少个相数点，纵向上面有多个相数点，懂吗？OK，我们先把这两个说了知道吗？你会返回一个什么ctx点跟一外角会返回一个一对等吗类型的对象好他有几个属性值，首先外代表什么？横向上像数点的个数，OK，看呢，纵向上像数点的数。中中下反下去了，那我就不打了。

纵向OK，纵向上什么像数点的个数是不是还有个什么。Ddd首先看它是一个数组。是不是，是一个什么瑞吗？是不是OK，首先它是一个数据，具体这个数字里面是是一个是个什么鬼，我们来看一下交易啊，这个数组里面放的就是每一个像数点的啊gba信息。那你想想，那我现在一一万个像数点，它的RGB一个嘛，1万乘以四嘛，也就什么前四个代表。一个像素后四个又代表一个像素，每四个代表一个像素啊，可是这里面有一个区别。什么区别，我们看这个透明度，我们是不是255啊，想想我们的取值为多少？

OPAT吗？OC是零到一样，而且开里面透明度是零到二五，这是不一样的地方。啊，RGB的值都是零的哦，不信我们来看看这干嘛，我们说这边我们这一个嘛，CTX0个嘛，你非的时候我能在这边写吗？Ctx点掉等于一个P，我能这么写吗？这么写渲染出来应该是个什么颜色？这么写，渲染出来是个什么颜色，是不是还是黑色是不是，你们干嘛同步的思想它得在上面，哎，告诉你下次会的时候，是啊，粉色这里。Absence。来看一下，刷一下好这里。好，往下走一步，再往下走一步，你们塔看看。周你你看251922308，来看一下我们这个粉色是不是25192230。

这点shift，按住shift点点25192230。是不是你拿到的是不是都是我像素点的信息，因为它这个数组每一个像数点的R级别信息。能理解吧，再想想那个obcd，我们能调吗？嗯。现在之后我想画一个元素，你看咱们现在是不是画一个元素啊。是不是我这个云稍微透明一点怎么办？Pink传rgba，是不是看一下rgba rgba，哎，我真我真没怎么玩过，你们脑洞真大啊，我们说蛮大，那个信息是多少来着，12。嗯，他吧是吧，走你就要C是吧试试啊，我也我也没怎么玩过。

点一个点三是不是你我的妈呀，还是可以吧，是不是，你知道我一般怎么做的吗？啊看一下我一般怎么做的啊，因为我从来没在这个非代里面去用RGBA啊，为什么想不到啊来看看，那你看我一般怎么玩呢啊走你比如这这边是不是一样，是不是OK走你如说我现在么，我要干嘛让他透明嘛啊看我的2B做法。好，只你OK，你不是已经拿到这个image date了吗？是不是我们干嘛，我们说一个什么。哎，不要忘了吧，这样吧，我们说我们负循环来看一下，只要你我们说画一个I等于零，是不是N小于什么image对塔点。里面是不是有一个叫贝塔data啊，贝塔点认识哎，加角是不是，这是不是可以拿到什么那数组的一个。

信息啊是吧，那这个数信息我能不能改，能吧，我不知干嘛，我说改这个改这个透明应该怎么改，是I4乘以嘛，是吧，四加三嘛，诶四乘以A，这四乘以A加三是不是，这是是最后一个，我拿第三个第七个第十个吗。是不是在加上。每四个代表一个小点，每四个代表一个点，这不是第三个吗？0123吗？467吗？是吧？OK，然后呢，八九十吗。

同学们拿它嘛，那不就是二加三吗？没问题吧，OK，那这是不是拿到的to。透明度啊，我透明度是0.55的吧，我改成100。是吧，那我这个对条里面问你这个值是不是已经被改掉了是吧，OK，然后怎么办，那是不是放回去啊。这么放啊，还有个API什么。Put image对怎么办？我们说干嘛圆弧的干嘛放过去呗，是不是干嘛？CTx.put image对塔首先要传一个般就对的对象，哎，我有没有一般就对的象，还是被我改过的，放什么位置啊，离你这个位置一模一样的吗？是吧，来看。是不是也是个透明的，是不是，可是这种操作更动态。能不能理解我的意思，我能在这里面干好多事情，干干什么，干好多你干嘛想不到的事情，懂吗？你这个只能稍微改了什么。

透明度嘛，是吧，我在这边我可以做马赛克。啊，在这边我可以写好多好多的逻辑啊，等我们可以看到等等改颜色也好改啊是吧，你想改这么颜色的话干嘛，你你就在这边怎的是不是，可是我们现在改是不是批量的改啊，待会我们写函数来抽出单个小数点。懂吧，啊说这个事情放到什么，待我再来做，大家看现在我这个小操作是不是拿我这个画布里面的一个区域的数点。把它改掉在吗？放进去吧，那我能不能自已创建。好，还有一点点吗。Create imagine对，咱们学了几个，一个是get image，拿到一个叫做imagine的一个对象，Image，对这个对象它有三个数形，Y hat date y是图片的宽度，相当于是什么横向上面相对点的个数，Hat代表纵向上面相数点的个数。对它是一个数组，数组里面是放在你这个区域里面像数点的rgba信息，而且这个信息都是从零到。

的啊，这个透明度跟透明不一样，透明是到一的啊，这开发是到的，讲，然后又讲了叫干嘛你拿到一个一的对象，我还能帮你重新塞回到。画布里面去懂不懂，具体尺寸，尺寸是多少，跟你这个一外机对称对象有关系，因为你拿这个一外机对象时候，是你要告诉他尺寸懂不对，你告诉他尺寸之后干嘛放进去尺寸多少，其实这个尺寸多少，这个信息在什么，你们就你们就对对象什么内部你只要告诉我重新放到哪边去。懂吗？OK，然后这边我们是从哎画布里面拿一个区域把它改一改，再放到跑步里面吗？那当然我们也可以啊。新增一个创建一个嘛，来看一下这里这个YCTRLCCTRL002。

零二杠像素操作好，再看之前我是都去拿的好，现在我不拿了干嘛亏。这对直接创建个一面就对对长对象吧，OK，而且你只需要告诉我，你创建这个尺寸是多大，100乘100的知不道？OK，你看我现在不做任何的改变啊，默认创建出来的是一个什么呢？默认创建出来的。嗯。好，默认创建出来的什么RG什么。周，你这四个字都是零默认，应该是黑色透明默认创建出来的好吗？OK，我们来看一下，这个一般对的对象，我们可以来看一下嘛，一有几节呀，第八个过来走你好，现在我们是不是没有放到页面上去啊，来看一下，走你硕里面去说一下是过来了，好，只要你看到这个email就对。

是不是，你看这个字是不是什么000好，默认是黑色透明，不是白色透明，白色透明你看2525250OK好周你然后拿到这个东西之后怎么办？塞过去嘛，是不是是不是往这个地方去塞啊，可是塞上你有看到这个东西吗？没有透明的吗？我把它的透明度的嘛，调一调嘛，全部调成二五，那就应该是个黑色。九零是吧，你也可以调整它的拼音量，一般一般走音。好OK，是不是关了，因为你这边默认换了一个什么。默认不是画了一个粉色，什么粉色，你看这里面干嘛，是不是一个粉色的，你看默认在里面画了粉色吗？懂不懂，OK，那从这一块我们讲了相同操作里面比较重要的三个PI，一个对象。

啊，三个API，一个对，Get image data create image data put image data以及image对象，Image有三个属性值，Hat date OK，这是像素操作最最基本的东西，待会我们拿像素操作来定义出一个比较通用的一个方法来，然后我们去做一个马赛克，下午讲爆发卡也要用到像素操作，能不讲好，先把A过一过。