28_尚硅谷_h5_canvas-刮刮卡优化.wmv原创

我们来看一下啊，这我们刚做的刮卡吧，好然后把它开起来，好来看现在我们的设计是什么样的。好用问大家就是开vas，大家看这边是不是有个开vas，是不是有个ul啊，因为这里面这个LY是跟UI是干嘛。一样大的嘛，是不是啊，我们说为什么一要加LYY的结构，因为我下面还有东西要还呢，我我不止一瓶嘛，那一个LYY代表一瓶嘛，懂吗？啊，所以说这个U2这个尺寸肯定要跟我试口一样，每一个LY的尺寸也要跟我试口一样，最终你们看见的效果应该是这样的，这应该是个视口，OK，这是第一瓶。第二瓶在下面等着呢。OK，等着呢，然后我慢慢往上滑嘛。懂不懂，OK，那可是大家想，那我这个canvas跟这个ul是不是平级的，我说这个canvas跟这个ul干嘛。应该是上下关系吧，开发时应该在UR上面在想，如果你这个开发时没有定位。

会不会出问题啊？肯定会出问题吧，你看你划开的是什么，没有了。为什么为什么啊，他被挤到下面去了吧，是不是啊，你们四川人说没有都这么说的，我们来看，我们来看一下啊，就说你这个开发一定要干嘛定位啊。定起来是不是不定位定起来的话，Ul是会被挤他被他挤到下面去了，所以说一定要定位定起来，而且定到他上面了吧，现在你每一次滑时我问你。我每次在滑的时候来，我来问大家，现在我这样划了问你。我开完还在不在？在吧，下面是不是才是那一层，什么真正的那层吧，问你，我在这个透明这个区域滑。触发的所有的事件能触发到UR身上去吗？触发不到，在暂时上还在看我身上，为什么我能看到那张图片了，我合成了吗？现在问你，我每次划是我这样划，我问你是不是在我开发上面去画，去画图形的，画图形是不是干嘛，我们说一开始你看发上面是有一个图形的吗？这个图形就是就是这张图片，然后我每一次划的时候，大家想是不是我也是在画图形啊，只不过这个图形跟这张图片叠在一块了嘛，我又设置了一个合成属性，我说当有两个途径叠在一块的时候，我只留下之前的那个。

留下之前那个什么超出的那部分了，大家看现在其实我是在看画上面画了一个这样的图形。是不是啊，而我留下来干嘛？留下了。外面的这个图形没有留下，没有，那抠出来这块就是透明的。00000吗？黑色透明嘛，所以我们可以通过透明进行看到下面的图片码。懂不懂啊，所以说我们一共有几层。

两层开放上面干嘛？有两层，一共第那个H结构有两层，一个开发一个U。是吧，然后干嘛，看看上面画了两层，第一层是个图片，然后然后画上去的就是我的一个图形，这个图形会跟这个图片叠在一块，我们取。图片超出这个圆的嘛，目标超出这个圆的部分嘛，懂吗？啊，所以说才实现了我们这个刮卡吧，是不是问你，那你这个刮刮卡就就这么刮，对我们后后续的逻辑会不会产生影响。会，因为我刮完之后这个开发还在，每次我在那边滑的时候都在开发上滑，而我之后的事件肯定是要嫁给1万，因为我要拖里面的LYY往上走，有没讲，所以说每次滑的时候开发C不要干掉，必须要干掉，是吧，而且我们已经滑到一半了。像素值应该就自动没了，应该干嘛，我说干嘛，你不能让用户这么划吧，每一个都干嘛，都自己干嘛划掉吧。

是不是啊，我说应该干嘛，差不多滑到一半的时候得了，用户已经玩的很玩的很开心了，是不是手指离开的时候，你就应该把这这一层干掉。是不是，而且这层应该慢慢的干掉，给他一个过渡嘛。是不是这样的，那应该怎么写？问，你现在我们写了几个啊？我们来写个看法式优化走你。零四刮刮卡的优化。怎么优化，现在我们说手指点上去，事件有了。手指划的时候时间也有了，而且还有东西，大家看这里面是不是两个回调函数啊。是不是啊，虽然说它是两个作用域吧，可是问你我在这个ctx上面绑着任何的一个样式属性在目里面有没有用？有用的，因为你CD是在哪。在这呢？在这两个函数作用于什么外面呢？你看我不是两个回调吗？你看它是不是在这呢？CD是不是在这呢？是不是在这两个函数作用的外层呢？没有封在这个任何的一个函数作用域里面嘛，是不是这两个函数作用都能看到。

是不是的，你如果挖这个东西，你放到这边来挖有用吗？你放到这边来挖行吗？不行，这是一个函数中域啊。懂吗？是不是只在这个函数作用里面有效，外面是没效的吧？能不能理解我的意思啊，OK。那祝你，那现在我们还差什么手指啊？抬起来的时候吧，在谁身上抬起来。在看发身上抬起来吧，那在看身上抬起来时候，我们要去嘛，做意什么样的处理啊干嘛，我们说看干嘛手指抬起来嘛，我们说他知道他其木。你们之前学过almost down almost move almost up吗？与之对应的touch touch move touch end。

啊，我这边不是他道吗？手指抬起来它是摁的懂吗？OK，那干嘛，那是，而且移动端的事件千万不要用的形式来整，没用的啊OK，整一个嘛，我们说来个它是什么摁的来一个。方形好走，我们说在这个方形里面，我们要干嘛。我们要统计一下你划开多少了吗？怎么才能统计到你划开了多少？但凡划开了，都是透明的。像素操作表，我先拿到你画不像素所的像素，看一下有多少是透明的，透明的超过一半你就给我自动打开是不是？那我怎么拿到数据相数一个OP应该等于什么？首先，你是不是得拿到image data塔？Image data应该等于什么？

C怎么拿，零零拿。整个吧，那就是斯是吧，之前我叫的名字不叫斯，就这个嘛，斯斯，这是不是拿到时就想说看完时间太。是不是，那这东西什么OOPX应该是多少。Imagine什么？点Y乘以image塔点，这不就是总共有多少个小数吗？总共多少个相同点吗？是不是，那我怎么判断你现在。有多少是透明的呢？是不是这是说这是所有的去里面找呗。是不是怎么找先干嘛循环你这个ox。是不是我说Y一个I等于0I什么？2PS点认I加加是不是，然后怎么办if什么？

为什么？Image加date里面是不是有一个date对象是我说你的四乘以二加三是不是它的透明度，如果你这个透明度等于多少零？说明你是透明的是不，那我给你搞一个flag啊，佳佳这个flag名字写在外面。能不能每次写到哪边？这个应该在哪，我去挖这个flag最好在最最外面去挖嘛，像能在这个他的里面去挖吧。想想那是不是每次去摁的时候，你你在这边挖的话，每次他去摁的时候是不是都会干嘛，比如说上来我挖一个flag等于零，那每次touch摁的时候是不嘛重新到置顶呢，我说把它放到。

外部就放到什么这个卷里面来嘛，这个卷板上只会执行一次嘛，是不是这边干嘛，每次进来的时候，如果看到这个像数特明的，那来再加。是不是在哪。能理解吗？那什么时候干嘛？大于等于。它除以二，我就应该让谁消失。让开才慢慢的消失是吧，我这样吧，现在现在他慢慢消失点点是吗？Opposite，我让你等于零，那么透明吗？是不是给加个全三形？是吧，来一个全三行为一秒钟吧，是的，看行不行你。因为应该是优化了吧，OK。看一下20进来。

我来刷一下，我慢慢关嘛，是吧，这个时候我手指抬起来。其实应该为一个数了。是不是，比如说我们把这个来干嘛打印下，每次呢框是有点来你看下。好，我说一下。等我手指抬起来的时候，我我还在滑嘛，是不是抬起来。也是没有触发到。怎么没走？这我全部花完，这应该要到一半了吧。没好使吧，是吧，来这边打个断点干嘛。第八个进来看有没有进来吧，是吧，我们说遇到问题打断你吧，OK。瓜瓜糖。走你来刷一下，OK，走你是滑这个他摁的没有被触发，我看一下，走你走你是不是我在滑，现在好抬起来没有进去吧。

压根都没进来吧，我看这个事件也没进来，事件也没进来，就你事件进来了是不是来看一下，往下走往下走往下走，我知道了OPS，有认识吗？疯了，这是个数吧，我给他认识干嘛。是不是啊，OK，你再来说一下。好，再来看，再来看这个O。向我滑，我滑，我滑，是不是没有一马手抬起来，进来吧，走，你走你走，你继续还。进去换是吧，好，我跳过这个断点，这你看一下。这个值一万多，是不是下一次我再还呢？好把这个单点给他干了，好来看一下重新刷。

停，你看这个值是不是有的，我下次再画的时候，你看是不是在这个基础上去划的，停你看是不是这个基础基础上去加的，OK，我再画什么时到一半我看。还没到一半是吧。不用还了。好，这里。重新。是吧，不要了啊，可能太多了，折两折两，哗哗哗。应该差不多一半了，这应该到一半是手指抬起来。是不是还有件事情没干？你看，看完还在。是不是我说你现在滑还是在看上滑，他透明度为移吗？是不是什么时候把删了。

透明度变成零的时候吧，什么时候知道透明度变成零了？什么时候知道透明度变成零了？什么时候知道透明度为零了？过度执行完吗？过度执行完怎么知道过度有执行完全是吧？点什么and even listen，当你全身心end的时候，我要干些事情让你自杀，是不是你把自己弄死？认点re什么re，按O干么？Move。阿嘛，直接屏幕掉了来看行不行，刷一下看这个看我说走，要你我刮不呱呱呱呱。这里没有，然后你再花时间全部在120，是不是现在开发时上他在的时候，你跟他好好利用，他不想要他的时候就就给什么就给他干掉是不是OK，那到这一块整个刮刮卡才能做完。

懂不懂，从这个逻辑底下，才是真正去做花瓶逻辑了。懂吗？老师，这个报告要做干净一点好。