24_尚硅谷_h5_canvas-马赛克效果.wmv原创

啊，来看一下啊，前端不招了，前端我自己还不能写完，是不是就差前台啊，我们来做什么做马赛克是不是，马赛克是我们像素操作的一个分析，来家看一下，好，那我们从这开始写零四好马赛克是不是啊？做马赛克来看一下怎么做马赛克来看最终要做成什么样子。下图操作马赛克，OK，这张图我先贴过来啊，这个必须要的啊，马赛克掉啊，影响使用，这看看。OK啊，像这种东西必须要给他啊，马赛克是不是OK，我们来看怎么给他马赛克，好，我们来做，首先咱咱们把什么这个看法是最基本的东西，我们先写一写吧，OK，我们说要不要使用到图片，要肯定要使用到图片的吧，那我们想那是不干嘛要在开发之中去引用图片呢？啊，走进首先来个开放值啊，元素是不是OK，比如说ID我们叫什么。

马赛克是吧，外资害的我们是不是暂时先可以指定啊，但是这个外资害的我们在这边指定嘛。不好，为什么不好？因为你看我们这个画物的快速是不是了两倍。是不是，但我肯定要通过JS来控的。是不是啊，OK，所以你可能你你这个图片可能会换啊是是，那这个外置我们还得干嘛，暂时先不置定是吧？OK，那么我们来撕这好干嘛？来嗨我们的常规操作。嗯，常规操作还是什么，常规操作还是常规操作还是什么啊，你看是不是我们刚看一些东西的时候，你发现这个工程他在抖来抖去啊，是不是不好看嘛，然后干嘛，我们说一般我们都要做这些常规操作好，这是企业每一个项目都需要做的好的，我服了。是吧，然后呢，找到这个ma。

好居中啊，这形什么？那百分之多少？OK left50%，拓50%可全是。好全是变成3D好负50 50%，负50%是吧，OK，零这好看一下。哎，是不过来吧，没有背景把看给个背景，这你看一下，哎，已经过来了，OK，背景干掉好来JS行不写画一个什么啊，一般我们说看完图我们就做OC吧，OK document.q your query select，找到这个马S是吧，好找到这个马之后慢慢来走吧，应付是吧，用什么。

啊，oc.get context是不是OKY一个ctx等于oc.get context2d。OK，要怎么要去引入图标吗？是不是怎么去引入图标，画一个什么image等于0IMAGE是不是OK一面就等什么src等于什么二点偏接吧，是是OK，当你引入成功的时候，O漏的时候等于一个方形，OK，这张图片我要跑到它va画上面去是吧？是OK怎办定一个DRW转方法是吧？首先我们说一开始拿到画oc.y我们说oc.y跟这个一般没有关系，有关系那就要放到哪。这边加载成功之后是百分之么？OC点什么Y等于什么image点。

万四乘以二。宽度是不是它的二倍是吧，高度是不一样的，看是吧，oc.hat啊等于什么imagine hat是吧，好。我打开不要打开浏览器，打开热浏览器啊，不然要炸。OK，然后看一下，然后我们干嘛，是不是得确定义这个转换方法啊是吧，来一个方形DW转换方法是吧，怎么把ctx减什么转什么转一是不是走减C。从哪开始画零零是吧，来看一下，只要你上来。哎，是不是就要出来了，另外一半是不是还没出来，我们来看它这个底色，应该是有个灰色的吧。

是吧，底色应该有个灰色的吧，连刚才的马赛给关了。看一下应该是有个底色的，我觉得。啊，应该有个底色的，OK，我们先给个底色吗？Back的Y问你这个back的是我画布图像上面的默认颜色吗？不是啊，OK，我们说画幅像的默认颜色为多少黑色是不是？现在干嘛？我们是在旁边这个区要把它什么。马上个图像给他画出来，我可以放到这边，我是不是也可以放到一层把你盖住啊，真的吗？看我心情吗？是不是？那问他首先应该怎么办？也就是说我去专一卖这时候吧，OK，现在干嘛，这只是去专了一卖对吧，是不？这是只画了画了一半图吧，就现在是吗？另外一半图啊，怎么办？我说肯定得干嘛，有一对像素重啊，肯定需要，肯定需要像素吧，是吧嘛，我说这个我们叫做new啊，比如先叫的欧去从上去去实上拿老的就从他上把他身上的所的像素全部拿出来，我们处理一下，把它放在这边来。

是不是，那我们先当老的，那这个那这个应该怎么C什么点什么get imagine那谁。零零这个位置拿多少图片的宽度跟图片的宽度这个很重要，因为我们现在我们这个尺寸是以图片为一个维度了，是不是OK，你白这点。是不是也就是说现在我们这个Y形的是这样。跟我们画布没关系啊，是我们这个图片的尺寸，能理解吗？OK，找你，然后呢，是不是干嘛搞一个老的，这个老的怎么不找一个新的吧，你用什么imagine data这个怎么啦？先自己创建吗？可以什么。

C create应该加Z塔是不是零零这个位置开始，诶我们说它需要拼量吗？不需要告诉我尺寸就行了，跟他跟他一模一样的是不是，然后我当中通过一系列的操作，通过二点面接内塔干嘛。去生成一个新的image什么，相当于是把new image里面的相似点根据o image什么去做一次修改，具体改成什么带我看我的逻辑是吧，这里面是用来真正做什么马赛克的。是吧，OK，最终我知道干嘛，最终你是不放在一个位置去是吧，最终你要CX什么破，他一就他放谁放心的，这个是这个新的肯定经过操作被改掉了，是往哪放。

多少点？是不是的，如果你不做操作，你放过去应该是个黑色透明。是吧，OK，如果做一些操作的，比如说现在干嘛。比如说干嘛我来个负循环啊，我做就做，看我这个这个现在写的对不对，Y一个什么，I等于零，I小于什么。New image是吧？点date点认识是不是I在加，是不是OK。CTRLCCTRLB找你是吧，怎么办？4I什么啊，我切记不要写这种啊，不要给我写这种代码啊，发人的啊，给我这个成给加上啊，你不是在什么操作上面写代码的，一要成的加三吗？比如说我们等一个255是不应该过去，就应该是个黑色，你看说明我们这条代码没错是不？现在只需要在这边做马三个。

是吧，怎么做马赛克好说马赛克思路是的，第一步干嘛？选取一个什么，选取一个马赛克啊，矩型是不是，你看什么叫马赛克句型啊，你看我这边上去的是不是就是一个马赛克句型啊，我把这个句型给你们啊，现在你们看不到是吧，你看上面肯定是一个个句型，毫无疑问。怎么放大的？OK，肯定是一个个句型是吧，OK，我们说干嘛选取一个马赛克型，这个赛制你自己决定。是不是啊，OK，我们说首先你要去设计一个把这克矩形是不是，那我这样我在下面画一个sin等于五，这个就是我的一个马赛克矩形。

啊，其实应该是叫马赛克正方形是吧，正方形也算是吧，第二步呢，从。马赛克矩形中干嘛一定是随机抽出一个像素点的信息啊，这个信息就是什么RGBA是不是第三步干嘛，将整个马赛克什么马赛克举行干嘛。将整个马赛克群中的像素点信息干嘛统一干嘛调成OK，随机什么抽出了那个。那我们整个套路是不是就出来了，能不能讲问题说，我们说选取一个马赛克矩形，这个马赛克矩形怎么选。

怎么做？是不是现在我们就要将这三部曲翻译成什么？代码是怎么办？啊，我现在选了一个，把这个宽度为五吧，好，我把这个东西干嘛比嘛重置，嗯，我打开我的。在哪边出来在哪啊下走。你老忽悠我做啊，哎呀，这不在这吗？这不又吗，没CC看下干嘛，CTRL2再加N是吧，好。

好啊，他可能稍微有点慢，等一会儿。好，我先把这个屏给截了吧。BOK，是不是上来了，好大，来看现在我的size为多少，为五吧，是不是，那我就是是不是干嘛。S为五的话，我们先是去老的这个什么图片上面去选这个，把这个就行吧，那怎么办？12345 12345，这是不是我们第一个买的。是不是下面是不是我第二个马赛克矩形。是不是比如说这个马赛克矩形，我我将它抽象成零零行不行？可不可以啊，这个马赛克知道。

零一嘛，是不是其实这个零零这个马赛克矩形是我们如果是算这个像数点的话，是第几个像数点，到底几个像素点。是不是从零这个相点开始到哪了点吗？到这个点吗。是不是，也就是说这里面总共应该有25个点，25个参数点是不是好，那我来我来正写，我来写个代码，大家看一下啊，这个嘛，上来我来一个负循环，好Y一个I等于零，I小于什么。想想二小于。的贝塔点Y除以SIN2加加，我里面沾了一层不循环好知道你在干嘛吗？

Y一个是不是循环签到了Y一个J等于零，J小于什么二等1Y0除以三。这是不是也就是说这个I跟键五零对吧。爱根街，我能用来抽什么是吗？每一个马赛克举行，每一个马赛克举行的坐标。坐标是不是，这边是不是可以除以S，是不是拿你的Y去这个S吗？能不理解，OK，那我们说这个I代表一个马赛克坐标吧，OK，我们说的嘛，如果是零的时候，如果是零，零时候代表哪个点到，哪个点是不代表零，零这个像素点到。

是吧，第二个呢，如果是零一的时候，来看一下零一的时候是哪一个，是不是第二个12345吧，是不是从这边开始了三个四个五个，是不是找你2345这个吧，好这个是第几个点零五到哪。九几几角，十角零五到十角，这能不能讲，咱们再找规律懂吗？OK，我们先把这个记录下来，是不零五到19。

是吧，OK，我们不找零了，我怎么样后面了是吧，12345，这其实是开始循环外层的调用。能能不能理解我意思啊，你如果一直在这边循环的话，其实是吧，第一层循环有没走完没有，这是第一层循环没走完了，相当于你走这边是第一层的外层循环，走这边是第二层的外层循环。里面的循环是去里面循环，一个个马赛克就行。能理解吗？OK，走你那这边来，我成下这什么12345是吧，走你这是不是一个完整矩线，这个完成这个坐标多少。五零。9450到九四是吧，五零到90这个呢。

这个点是吧。012345吗？四五吗五到九。是不五到九九是不5094599吧，OK 5094599459是不是记住了这个，这是代表什么？一零这个码这个矩形吗？是不是，它的坐标应该多少。啊，这个不能记错，五零段九是确定啊，待会错了我们重新调就不要怪我知道。这个是第几个嘛，这个就行了。第几个了一吗？是不是好这个马这个取个五五到九九。这能不能理解啊，这个没问题，这个这个不需要理解是不是啊，这个说你在我，你说再不理解你干嘛，你把那个打开来，你给我一个个数啊，OK整你现在我们怎么办？我们说要从马赛克矩形，这个不就代表一个马赛克矩形吗？从一个马赛克矩形里面随机跳出一个相同点吗？你的项点不都在这。

随机挑一个吧，这个我们要挖一个。随机跳什么不去跳你的坑？是不是啊，问题怎么调这么去一个区域里面去拿一条。单项数操作两方是吧，拎过来了CTRLC是吧，不对。是吧？这两话是过来了，你到哪？拎到咱们是不是没有拎到描述的不管了，这就是我们的转方法，放到转方法外面去，OK，这就两个工具类嘛，是吧，走你。

好，给他搞干净一点。好，这里。好，现在我们应该怎么做？好，我们说要从一个区域里面去拿一个小给着P波是吧，跟着P1波问你传什么，你该上应该谁。O的image data塔是吧，因为这个data塔是从这个它里面这个数值是到里面去取的，我们只需要传O里面data就行了，是不是，问题是后面这两个字应该怎么传随机的吧。怎么传一个是X，一个什么Y，随机拿一个吧，OK，比如说我们干嘛，我们其他项不看，我们就看零零。是不是啊，那是不是X上面是零到四，Y上面是零到四啊，你应该拿什么零到四的闭区间嘛。

也就是说，你不管是X还是Y，都应该是零到B区间。是不是零到四的B区间。B区间就是可以拿到0.4吗？开机间是干嘛拿不到是吗？这个这个懂吗懂吗？OK，你说一定是零到一个区间吗？咋咋的。随机嘛，肯定是点，那是不是这个方法反馈是什么，零到一的零到一的随机数，OK，我们说你这个方法反不就是什么。零到一开区间一个数。是不是我们看一下什么。啊，这个就给它关掉了。好走干嘛去看谁按DN嘛是吧，API就看MDN。

你看零到一没问题啊是吧？OK，这没问题，好，那我们再来看这个没问题的话，大家想想，OK，我们说你反回的是零到一的我们要多少，零到四的怎么办？乘以什么。乘以S行不行？是不是应该乘以三。必须要乘以三，是不是乘以三的话到什么了。我们数乘以三，为什么你这边是零到四，一个B区间跟你的三是不是有关系的？是不是你三如果六的话就是零到五的了，懂吗？给说这边我去乘以大小，我这边个该到零到五，五点向向去整。

向下趋势才可能是零到四的B线吗？是不OK，那怎么办，这个应该怎么办，还那干嘛卖什么向下去的看向下嘛，100吗，不落吗，是吧，就你OK，你看这个值是不就个嘛。零到四点领取钱。是不是这意思啊，那么你下面这个呢，一样的。点的零到是个B区间吗？是不是这意思啊，OK，那是想，那是不是我们一个随机数据定挑理出来了，可是咱们挑出来是第一个啊，把这个矩形吧，是不是咱不管，先挑了第一个马赛克矩形出来再说，后面的我们慢慢来吧，是吧，OK，走你那怎么办？现在马赛克矩形已经出来了，不是马赛克矩形，马赛克矩形我们定义完了，相对拿到了，将整个马赛克的小片统一条抽出那个，这是不是我们抽出来那一个，同一条怎么调，同一条怎么调，是不去循环这个马这个剧情啊。

你现在不是要把马赛克去你们每一个上面统一条跟它一样的吗？那我是不是在在这个里面干嘛，画一个A等于什么零吗？是不是A小于什么。A选什么A加是不是你们还得来茶，你要把一个个吗？你想想啊，你要把一个马赛克矩形里面每一个小点全部调成这个color，你是不是循环整个马赛克矩形啊？是吧，那很重要的，我都要循环吗。

是不是啊，周减怎么办？Y等什么？B等于什么零，B小于什么SS是然后呢B加的。是吧，这里怎么办？是不就改了，不是改了吗？是什么这个就是什么鬼，我们定的时候。是那个区是偏一样吗？不是就是么，你从哪个区里面去找吧。我说哪个区里面找不是，我们说这个卡了是不就就这了。我的位置好。是不是这个配音量怎么来AB，每一个销售点我都要轮到嘛，那是音量从头到尾干嘛？录音从零零到14嘛，这不是第一个。

马赛克矩形的吗？零零到四四嘛问题这个应该是个什么电塔，这个是不是我们要去改的那个电塔。是吧，那那这个地方应该是是new还是old。牛的，这不是我们去改的吗？你看我们要改这个牛一的吧，怎么改从的一里面去拿一个随机的也出来，将你这个用一电数的数据全部改成我这个行的。是不是这样的，只不过我们改的是什么？改的是new image塔里面的第一个完这个矩形方，因为这个AB的这个值是零，零到四。是不是我们是不是改了你新的这个里面的第一个嘛，这个矩形是不是OK，那我们来看看，那是不是第一个嘛，这个应该可以出来。是不是，那我是干嘛看。你看有没有来看一下。

放大。看见没有，你看这个颜色肯定是从这个里面随机取出来了，是不是OK，那想想第一个就出来了问题，你到现在做就就就做了第一个。啊，马上就做完了是吗？你疯了，客户需你的咋整啊，咱们这个从头到尾只做了一个，我们应该怎么做啊，要做多个吧，是不是问你这一次循环，问你这走完一次循环。问你这一这就这双层循环走完，其实处几个嘛，这个矩形一个是不是内层循环走完，其实处理了几个。一列是不是？外侧循环全部走完才算整个全部处理完是不是问题，那我问题这边应该怎么设计，是不是这这边的值根这边的直部都要去涉及到，首先你这个AB值肯定是不对的，因为你这么写的话，我们这里是第一个嘛，这个矩形，第其次你这个XY的值也是不对的，你这个XY处理也是第一个嘛，这个矩形。

是不是，那想想应该怎么办，第二个马赛跟矩形，跟第一个马赛跟矩形相比的话，它比第一个马赛跟矩形它要多什么。比如说大家看这是我第一个买这个群嘛，你第二个买这个群是不是就在下面跟的。是不是OK，走你这可能是一排会跟很多，是不是，这是什么。第二组第一个。调度调的。是不是OK，其实这两列走完，其实我们一次循环考了几次。跑了两次。是不是外侧循环只执行了两次，还从零变成了一？是不是内存循环器干嘛从头到尾跑，跑了整整两次。跑的应该是内侧循环跑了两个来回吧，外侧循环真的才跑了两次。

是不是这个道理啊，好问你，那现在该想想，如果你现在是第二个了，第二个是不是它从零五变成四九了。是不是，也就是说，其实我问你走第二个的时候，X为多少？走第二步的时候，X不是零吗？借的子不就是一吗？是不是你I是不是还是零到四啊借呢。五到九了吧，是不是要多多多一个色子。你想想吧，肯定是加五的嘛，你上面不是五乘以五的吗？你到上面这边干嘛，肯定是要加五的嘛，是哪边加五。YX有变吗？变，可是X有没有可能变，你到这边不就变了吗？XY是不是一样的，所以那我们应该怎么写？这个这那我这边应该怎么写。

想想我这还是拿着第一个的维度吧，是不是我这两个，我问你这两个for ma.for是不是都是为第一个马赛克主义去做的设计好，你想为所有的马赛克群去做设计的话，这边肯定是跟IG有关系。是不是啊，OK，应该加，是不是肯定是加。什么I乘？能不能理解？是不是因为你干嘛没没干嘛，你这个I每次加一的话，相当于什么。我这个X是不是要每次往前走，是不是它的维度是一个size嘛，就你X从零变成一，那我这个I的维度前面就应该加上。是不是后面呢，如果你借家了。这个能不能满足所有的嘛，这个句型。

这才能满足昨天板条矩形嘛。是不是你看嘛，比如说干嘛，我第一个嘛，这个矩形对吧，第一个把这个矩形I等于零吗？那这边不就干嘛，X轴不是零到四吗。是吧，是不是你看这边也是零嘛，那还是零到四吗。是吧，第二个呢。这这边是零吗？是不是还是零到四吗。这不是变成一了吗？这不变成一了吗？那就多到。你看零到四五到九。是不是这是我们嘛，第一个马，第二个马吗。是吧，这可能是第几个马赛克就行了，反正是第二组的第一个，第二组的第一个呢，马赛克大家看I有多少一嘛，那这边是多少五到九。爱的唯一吗？

五到九啊，是不是你看五到九吗。是不是你看第二个是不是零零到三，因为你接的是零嘛，零到四嘛，你看你一的时候呢。一呢？五到9OK，这个呢。一的时段还是。五到九。是的吗？五到九五到九吗？有没讲，因为五到九五到就才能到九。是不是，那不就是五到九，五到九吗。那么你讲OK，那问你这边要不变，这边我处理还是第一个马这个句型，你想处理后续说的马这个句型，那那应该怎么办。干嘛一模一样？对。

Boy。应该是A跟B。先生这个是。这个是用IG还是用abd，应该还是用I，是不是，因为你这个AB是处理一个嘛，这吗？前面是代表你是第几个嘛，就是不来看下，那这样是不就可以了。完事了，是不是钱是不就出来了。是不是就出来了，你看我每次刷的时候里面是一直在变的，为什么它跳出来这个水点不一样嘛，是不是模糊的嘛，就是是不是大概如果这个马赛克曲给稍微给小一点。有没有一层磨砂，感觉好像变成高清图了，是不是啊，你看这个这个腿明显变白了吗？变得高清了，你自己看更加细腻了，你看是不是，你看我让它有一层磨砂的效果，整你我给你。

磨砂的效果是吧，给个1.5还不靠谱。可能会坏掉，你看有点什么磨砂的效果。是不是啊，你看我给个我给个十，你看给个十，这个马马赛克矩形你们就就能看见了，这是不是真正的马赛克，是不是啊，其实我们作文的马赛这种朦胧的感觉，是不是找你给个娃差不多也不行。对，差不多吧，或者说给一个四。啊，差不多吧，哎，你们有没有看过一种效果，就说我旁边有一个有一个可能戳出来的一个进度条是吧，往上拖马赛克效果越来越厉害，往下拖马赛克效果越来越不厉害，其实改的就是这个。

能理解吗？OK，那他想想我现在是不是干嘛，是在旁边搞了一个新的，我能把它给叠掉。咋的呀的时候嘛。玲玲给你点。看见没有，马赛克这边出来了，你可以给花布，不要给颜色。我刚说过了，让你们可以什么对比的去看嘛，是吧，你可以把好好谱的颜色干了整理，你看那是不就出来了嘛，大哥懂吗？你可以在做的时候干嘛。你在put之前先把个嘛。肯定要什么什么新什么，是不是可以清一扫啊是吧。扎心啊。oc.y是跟OC点。同步的吗？你。

你看。每次都在变，马赛克矩型在变。是不是啊，你看我这里就做了一个马，这个出来了有没讲好，稍微让它变得细一点，变成五的就最细腻。是不是啊，这个能理解吗？好，OK，这个是不是跟我们的像素速度是有很大的关系的，你看我们用了put image用了什么？要用了get image image put以及我们自己定义的两个单项数的操作。是不是啊，那最最主要的是你这个东西能不能看懂啊，这四层循环到底是用来干嘛的。你能不能看到啊，最难就是什么四循环吧，这不循环这两层环干嘛。就是。这句话。是不是这个是干嘛的。

是吧，OK，这个干嘛呢。那你讲。嗯，那么就讲OK，这是整个马赛克取的一个思路啊，大家先自己先看看。