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

OK啊好，刚刚我们讲了一个像素操作吧，是吧，可是大家想现在我说哎，比如说大家看我想获取到，比如说我把上面这个给做了啊，比如说把这个粉色的我给租掉啊，我不让你换粉色。好，我们来看一下，在这我想拿到我这块区域当中某一个点的像素信息。我怎么办，现在咱们里面是不是都是黑色的。是不是随便拿一个，是不是都是都是黑颜色的，那有可能你画里面是画个这边的图像颜色是不是就不一样了，是不是，那我想拿到什么，这里面任何一个点，你只要告诉我配饮料。我想拿到任何一个点的一个信息，那怎么办，现在我拿的都是一个区域的，是不是在一个什么大的数组里面嘛，现在我现在我就想拿一个怎么办。是不是我们得第一次API了啊，因为看法是没有什么这种API了，是不是我们叫单项数的单项数的一个操作啊，最个呢，我们重新来写一份LC。

Control。零三单项数操作。那这个东西很重要，跟我们的马赛克有极大的关系，好单项数操作OK，单项数的一个上线，OK上来干嘛。是吧，OK，嗯，比如说嗯。好比说干嘛我去啊，那我写好一点吧，按照套路来是一天时间。ABVC5是吧？OK，然后是Ctx.ore是吧？这是一组嘛是吧？OK，然后当中干嘛C点。cx.begin pass OK begin，前面写一点钥匙。OKCTX点什么？嗯，CTS点。

嗯，掉吧，等于一个嗯，灰色OK，然后我在下面去画CT x.feel right。想想怎么换呢？嗯，就离你这个位置吧。OK，画一个100乘以100的是不是OK？这你们来看一下。是不是上面就上来了，呃，问题你也是灰色的吧，那就换成粉色。是不是OK，是不是在这边那平量稍微大一点，五十五十这下。好是不是好，现在我要定一个方法，哎，这个方法放嘛呢，你是不是一个画布啊，就你这个画布上任何一个像素点的信息，只要我想拿到，我告诉你拼音量，你就把这个信息给我发出来。

能不解，就任何一个点的，我不光是这个什么图形里面呢，你整张画物上面，只要你告诉我一个偏移量，我就要，我就要把这个偏移量上面这个像素点的信息给你反回出来，像素点的信息不就RGBA吗？懂吧，咋做肯定得肯定得定义方法是吧，OK，来一个方形。好，叫什么get PX符，是啊，OK，是不是拿到一个销售点的信息啊，那你是不是应该要给我什么。你们就对了，整个所有的项数点应该给我吧。是吧，OK，给我一个对，然后呢，告诉我平移量。是不是啊，问题是现在我是不是要拿这个1IMAGE里面呢，P移量为XY的一个什么相比的信息嘛，那这个1IMAGE对应该怎么答在外部Y什么，比如说现在我是整个画布的，那怎么办？

C什么零零他的他的。是不是我拿这个区域嘛，也就是我整个包布区域的所有的所有的信息我全部拿到，是是然后我把这个一般检算干嘛传进来，你告诉我一个偏移量，我点拿到那个偏量点的信息咋整。反正我知道最终你肯定要给我推一个东西出来是吧，那我干嘛，我先挖一个C卡的一个数组是吧，最终这个数组肯定要给我干嘛，肯定什么你听不出来了吧，问题这个color里面什么。这个color应该干嘛填充吧，我们说应该有COLOR0COLOR应该是应该是谁的信息发的信息是吧，还有什么。

啊。B。A，是不是，我是不是要去拿这些纸啊，这些问题就是这些纸怎么去拿，这些字肯定肯定在哪。你们讲date嘛，它里面有个什么，有个date嘛，那干嘛，我在上面先再去画什么，画一个data date等于什么。是不是有没有听错，没有吧，没有听懂吧，然后呢，挖一个还有什么，是不是就从这个电台里面去拿就行了，问题是拿哪一个。那哪一个。

给你个以外，然后。没那么简单吧，XY是偏移量。我这个对他是他的四倍呢，我这个电是不是干嘛你说的像素点的四倍呢。是吗？第一个就第一个像素上一吧。来我们看看啊，比如说干嘛，我把这个画谱全部干嘛。编辑一份，是不是看我打开我的，然后打开这个浏览器。OK，打开我的。想想。喂。好，等我打开。好，我们说这个XY是偏移量吧，是不是OK啊，记住XY是偏移量。

Ctrl alt加五分。啊，这个的基本操作你们得会啊。有点卡。啊，电脑在叫。没事。应该炸不了。啊，照的粉丝照我吗？你们跑不就行了吗？是吧，二加N。OK，我接上来是不是来看灰颜色的是我的画布区域吧，是不是，OK，比如说干嘛现在我这个一麦是不是拿着我整个画布的一个区域啊，是比如说干嘛我想拿我这个画布XY一个个什么。一个像素信息吧，我就问你。这个点。是不是我的玲玲？哪个点是为零，你是这个点吗？还是说它才是为的是这个矩形还是这个点。

是这个矩形，矩形代表零，零平移的数，那个像素点现在已经像素点被我无限放大了。能不能理解啊，就上面这个点才是零零。懂吗？有这个整个一个框才叫零零是不是，那我现在应该去哪谁的XY的吧，是往这边是不是走X啊。是吧，OK，我们说干嘛，比如说我现在拿三三的。是不是我要拿三三这个点的相同点的信息吧，走你我说三三怎么办，0123。0123这个点。是不是我拿这个点的信息吧，我问你这个点的信息在我这个贝塔数组里面应该怎么去呢。也就在我这个对塔数组里面，前面到底有多少个加速点。也就我干嘛，我现在不是三三这个点吗？三三这个点前面到底有多少个三数点。

不然呢？就是我这个三三前面到底有多少个像数点，你先不要看这吗？对长你没关系，先不要看，我就问你三三前面有多少点，X乘以什么。乘以什么快？W再加什么三是什么？你先听着啊，X乘以这个W是一个什么？W是什么宽嘛，X呢是你有多少行呢？这个Y不就你吗？123吗？你前面不是还有三个吗？你加Y是肯定的是吧？问题是前面是不是应该这么乘X1W。

是不应该这么长，我们说W是代表一行上下数点的个数吧。那不就是X乘以W吗？不需要减吗？因为我这个W是你一行上面所有的像素点的个数。如果有三个，那就是三个。它的索引是从一开始的相同点的个数啊，懂吗？这个X代表有多少？好吗？是不是啊，那我说你这个相对点前面是不是应该有X乘以W加Y的相对点。能不能讲也就我三三这个点前面到底有多少个，应该是三乘以W加三。是吧，这个打这个。W，跟什么有关系啊？你拿到那个image date吗？看你拿到那个image data的区域吗？也就是说我这个片量是根据谁来的。就是根据整个画过来的吗？不一定吧。

是不是我们说得看你什么，我说这个偏量的宽度，现在我拿的是不是你整个画幅的宽度啊，那我是不是就根据什么，就是拿你的这个区域的。这个偏移量是不是代表我这个区域里面偏移量是不是，如果我这个。因为内塔我本身拿的就是这块区域的，那我问你，那我这个XY的平的话，是不是相对于什么这块区域的。能不能理解我的意思啊，OK，那你就问你，那现在我问你现在怎么去拿这个R的信息怎么去拿，比如说现在就是就么三三这个点。现在就是三三这个点，怎么去拿这个3333这个点的R的信息。我们说了三三这个点前面有多少个点。X乘以W加Y。前面是不是有这么多相数点啊，这么多像数点在我这个贝塔里面占多少位。我这个电脑不是一个数组吗。

要不要乘以四。要不要乘四，需不需要乘以四，CTRLC干嘛轴，你这是不是就乘以四，我问你这个XY是不是都有W，怎么了？挖一个W等于什么？Image点，我说这个偏移量不都应该根据这个image来算。是不是啊，我们可以再画一个什么H等于什么image加Z，它减什么hat he，虽然说这个hat我们暂时没有用到是吧，可是问你这个像素点的。问，你现在我大家看是不是我三三前面，比如说任何一个XY前面，任何一个点前面都会有这么多个加数点，这没问题啊。不管你哪个点，前面就应该有XW加Y的小数点，这个能不能过？OK，可是我问你这么多项数点在这个数据里面，是不是应该在四乘以X乘以W加Y的。

位数是不是，那我就问你数轴下边是不是从零开始的，那么你那这个点是不是就是我XY的发行线。能不能理解那G信息呢。是不是这个嘛，加1OK，然后呢。加二。加二等于K加三，那我是不是就拿到了我XY偏移量这个小的信息，是不是想想现在我这个区域是干嘛来，我刷一下我是干嘛画的是50乘以。50的，那么你50这个点应该是一个什么像素啊，灰色的还是还是那个粉色的。

这个点50，这个点应该是灰色的吧。是不是51 51开这个点应该是不是干嘛粉色的。是不是啊，那我们要干嘛测试一下嘛，干嘛我们说什么。是忘一个color吧，是不是等于什么get PX是不是传什么image？对是吧，配那干嘛，应该是个什么颜色，应该是个应该是个什么颜色。是看了吗？这个点应该是粉色还是灰色。灰色吧，是吧，来看一下九点F12是不是灰色。刷下。啊，是。零什么？那没问题。

哪边写的等等啊，这边写的是不是等等教你说一下，你看这应该是个粉色吧，好像。是不是来看一下这里？灰色的是干嘛128128的粉色我看我们是不是画了一个。嗯。还看不到粉色吧，其实这个点你看15192203嘛，粉色嘛，是不是啊，好像有问题吧。嗯。是不是啊，我们看49 49这个点呢。49 49这个点呢，是个什么颜色。好像就是个灰色，哎，是个什么色。黑色吧，你想我们这边打没血的有问题。Image data有没有打错零零位置开发点开发点。是不是看吗。不对，开发点开发的是谁啊？画布的吧，哎，对，就是画布的。

没有问题吧，因为我们拿的是画布的整个信息嘛，是不是，然后把这个一标就在干嘛塞了进来嘛，是吧，那你偏一要000这个位置百分百应该是黑色。啊，应该是个什么会颜色吧，是不是啊，切记咱们拿的是不是画布上去图形的小数点。你这个灰色是画布的啊。背景色默认这边就是啊。黑色透明的。画布上面图像吗？我们拿的是画布上面图像的像素的信息吧。你这个灰颜色是不是我整个开发元素的背景色不一样的？能不能讲，可是我们说你这个粉色是不是需要我看到上面那个图像，那其实我们说这个我们拼下是不是干嘛。五十五十啊，因为咱们第一个点是零零嘛。是不是，咱们这边第一个点是不是零零，是不是，那是不是干嘛，我们说你这。

我说你这个片量是50万，应该是零零到4949吧，那零零到4949的话是应该就是透明的黑色，从50开始的话，应该是什么粉色。是不是你说的嘛，50开始就应该是个粉色走，你刷一下。APP上那就应该是啊。粉色是不是这个颜色不粉色吧，看。251922203嘛，2519203。是不是OK，我们知道嘛，4949应该是个4949那边应该是个什么颜色，黑色透明应该是零零。四个零。是不是OK，那比如说我们再来直观，你现在是不是咱们是获取啊，那是不是还能来个设置啊。找你一个get一个什么sit sit怎么玩？Sit需要什么？

现在需要什么？你是不是还得给我传一个卡，你得告诉我什么颜色吧，是吧，那我干嘛，我把这个换完。能不能看到。是不是我是不是还是找到XY偏一张图的这里了吗？在我电塔里面像这个什么位数吗？上面我把你干嘛换成我要指定的颜色吗？是把这两个位置换完就可以了，这能理解吗？能不能理解？我这边不是传个数字就行了吗。能理解吗？OK，那我们来看一下，这个还需要举证吗？不需要，这个看了还需要吗。不需要，这是我是我在这边传的嘛，是不是干嘛，那我干嘛C p1吗。是不是怎么呢。干嘛，我这边先不要呗，是吧，我说干嘛P你告诉我image。

对，他是不是我在四九这个偏处给你传一个卡了是吧，比如说干嘛我传一个零零多。是不是这开发里面什么应该来一个黑色啊实心的吧，是不是，可是这个时候大家我是不是只是改了一下这个姨妈。我有放进去吗？没有吧，我是不是还得放进去啊，怎么放？怎么放C什么put吗？放哪个，这个是我是不是刚刚通过C的改过。CTRLC。放到哪边去啊，从零零这个位置开始放，因为你是从零零这个位置拿的，是不是看一下走里当中是不是应该有个黑点。你能瞅见。

85，八十五行少了个等号吧，走你应该有一个点，应该我们还能看见。是不是不信干嘛CTRLQ。编辑图片确定干嘛？Ctrl alt加N。走，你。CTRLV。看见没有，49，四九是不是变成黑色了，是不是，那想想，那现在我们是不是想要怎么换像素的颜色就怎么换像素颜色，想换哪一个就换哪一个，只要你告诉我拼音就这了。能理解吗？OK，那这你比如说我想换银行怎么办？我就想把这一行全部换成黑色复循环是吧，我这边来个循环画一个二等于零二什么。

哎，什么一行全部换成黑色，应该小于它什么点什么宽度吧。是不是OK，然后呢啊讲讲，然后往里面去啊改这个卖家对的吧，怎么改。这个字应该多少？不是99了吧，这个字应该多少，我要改行吗？那列上面是不是定了？列是不是定了，就改第49列嘛，那YY是不是就定了，X是不是就是我的。Ale。是不是啊，你最终是不是还得去put，因为我这一步是不是只是改了面data，你有放进去吗？没有，是不是到这边才能放进去啊。是不是这个意思啊，来看一下行不行。

诶改的是一列，为什么，因为这个代表。XY的平移了吗？Y是不是定死了？咦，好，这么奇怪。还这边。I不应该是横的吗？看我设置的时候是怎么设置的，对咱们看我现在是干嘛。想想我这边是不是，哎呀，我每次挨进来的时候的话，这个49是给了谁的Y的吗。没事就给，应该没问题啊。49给外吗？是不是？想想C的PX波之后，这个I是不是给X啊，X给X啊，X乘Y啊，这没问题啊。

是吧，然后再加Y呢，Y不是我给的49吗？是吧，怎么应该是哦不对，想想我这个49给Y的话，是不是永永远代表是这个49。这个49。这个49是不是前面干嘛，距离我这个头像是不是应该有49个像素啊。是不是能讲？能不能讲，那你想要改一行的话，你应该怎么改？应该是前面给49，后面给吧。能理解吗？OK，这里是不是银行懂不懂，因为因为咋想，我们在这边写这个Y的时候，我们说这代表什么意思啊，我不是X乘以W加Y吗？想想我们说怎么样，比如说我们这个像素点在这边，是不是，是不是你这边代表的是Y。是不是你把这个Y给固定死的话，是不是就代表感应列。

是不是啊，你要把什么，你要把什么固定词啊，X固定词吧。是不是X代表多少？好吗？多少行固定换个嘛。你在这边不就是改的什么一行了吗，你比如说干嘛，我改的就是第19行吗。我说这个X代表是什么，我就问你这个代表什么，代表多少。这个能明X就代表多少好，Y代表什么，前面有多少个嘛，也就代表这嘛有多少列，现在我想改行，你行是不是应该定时，我改一行嘛，那我这个行是不是定时，那我是不是前面这个X定时啊，嗯，是不是干嘛列嘛列嘛是要改一列，是不是要从零到最后啊，那干嘛让这个列干嘛跟随这个I加加。

是不是啊，那这个这个我这么写改的是不是一行。是吧，因为干嘛行，被我定死了，列没有定死。懂吗？你看我这个肯定是改变什么一行吗？是不是你如果这样呢。这样写呢，比如说这边我改了三三十，那我改成什么。这个代表什么？好吗？是不是行，是不是一直在变啊，那是不是干嘛给的是第三次变呗。是吧，OK，所以那肯定什么，第30天你到前面肯定么是零到29嘛。能理解我意思吗？那一行一列是不是咱们就已经调完了，有没有讲，那通过这个东西大家想想，那我们是不是就可以去做一个打卡。马赛克啊，我们先不做，先来说一下思路。大家想想，现在我这边是不是有幅图啊？是不是我能不能拿到这幅图里面的所有的像素点，算说你的图片吗？可你张图片是干嘛在我画上面去画的，我是不能拿到所有的像素点，我拿到这个像素点的时候，我能不能对这里面的像素做些操作，最终再再把它放过来，变成一个马赛克。

对不对，怎么操作，你是不是有像素点嘛，我定一个马赛克矩形。是不是我拿到这每一个矩形啊，这个矩形的赛子，你们自己去去确定，可能是五乘以五的，也可能是四乘以四的，随便我把这五乘以五的里面的所有的像素点。我随机挑一个出来，我让其他的像素点都跟这个项目点一模一样，那最终是不是上来就是五六。那么讲你看现在我变成马赛克的时候，你看上面是不是每一个都是一个矩形，而且这个矩形里面颜色肯定是一模一样的。每一个矩形的颜色肯定是一模一样的，这个颜色怎么来的？首先我要在你原图上面，我要去定一个马赛克矩形。是吧，这个马马赛克群就对吗。

就在我这边嘛。懂吗？马赛克矩形吗？你看我这个马赛克的图，是不是通过一个个马赛克举行的吗？叠起来的。是不是啊啊，注意听到看着我们在干嘛，这是不是一个马赛克矩形，大家想现在我在这边能不能去先找到这个马赛克矩形，把它的光靠先定定死了，里面是不是有好多好多像素的，我从中挑出一个，随机挑出一个像素。能不能随机挑出一个像素吗？我再把其他像素的R级别信息跟我挑出来，这个像素R级别信息变成一样的。那我不就是一个马赛克剧情，只要是我这个马赛克剧情里面的下属，那他们干嘛，R级别的信息不都是一样的吗。是不是，那我不就是可以出来一个马赛克的效果，是不是，那所有的是不是就是我的像素操作。只不过这个逻辑我们应该怎么去写嘛。懂吗？可是我们说干嘛你现在要拿下数据点信息，还要去改下点信息，肯定要依依靠这两方法。

是不是啊，没有这两个方法的话很难做。能理解吗？OK，好，那大家先把先把这个马赛克的思路，你看你能不能干嘛捋一遍啊，以及我们刚刚讲的操作单个像素，哎，到底懂不懂。