27_尚硅谷_h5_canvas-刮刮卡.wmv原创

好，来看一下这个东西怎么做，我们要做啥了。刮卡是吧，我打开这个关，好把这两个关卡嘛拿过来，反正以后你们要用。CTRLCCTRLC，营销按钮我先贴，贴过来，贴到票里面。CTRLV2个英案例嘛，是吧，OK，先打开第一把走你。格式化你是抄不了的，因为你们后面东西还没学呢，所以。没有卡，你看报警告之后会会告诉你的啊，这里你先不要激动，停，我们先把这个外面这个刮卡给他做了吧，是不是实上这个刮卡应该是个应该是个什么样的东西。想怎么设计呢，几层？三。

为什么是三层，应该有几层两层吧，一层开发是一层图片吗？是不是，是不是几层两层上面那是图片，上面是看看是只不过看这把这张图片给他引了进来，不是盖住了引进那张图片，引入一张图片吗。现在我每次画的时候都是在开发上面画，每次画的时候问你，我的手指跟我这个图片是不是会有重叠区的，只留下。目标溢出的那一部分是不是就没了Dis天星奥特，那是不是就这样现在当中会被扣掉一部分了，懂不懂？那是不是我们就可能能看到底下那张图片咋做啊？首先把一表结构来省四点是不是这你我来做个保案了，好吧，保发里两张图片的。

Cany。CTRLV，这里来个波干塔啊，直接拿合成这个写完，OK，这里接上波干塔，好，咱们做的这一版本跟之前可能不一样啊，好好听，呱呱看，终于好怎么写？啊，这个布觉都要卖掉，这都全全部干掉啊不这个。这个是什么？这个肯定一样的是吧，刚才我们说这个结构怎么设计。怎么设定，我们说是不是在做移移动端的一个东西啊，怎么办？M1PA没的标签是吧，Meta。

什么鬼是不是？说你们那么开心啊，看一下name是什么，是不是content什么。Y等于DY是吧，I。I应该需等于1.0 us杠等于no是吧？这里OK，然后怎么办？怎么设计结构，先设计先设计C面结构，我们说之后你做，知道我挂怀的肯定是个列表。因为你要拖着嘛，肯定是个U加LY的结口，想对长是吧，因为你后面是不是有一张列表需要拖的，OK，可是我们现在是不是只用一个L就够了，上面是不是还有一个开式层在上面盖的。

是吧，那我们再来个吧，开马斯是吧是吧，我说最好有一个包过去吧，们俩包过去吧，那一般这个包裹器我们是不是就拿的包款是吧，OK，怎么样，这个包裹去拿十包款。还有什么应该是不OK，我们说大家看这个LY后面后面图。大家看后面这张图，后面这张图是不是跟我的头一样宽呢？是不是啊，那怎么办？你这个LY的宽度应该干嘛。也是一样的吧，那其实ul什么，还有ul底下这个什么，LY还有这个什么。找你高度都应该是百分百。

是不是比如说我们打开来看一眼F。刷下看下，我的是不错。还没有是不是，咱们先不管看这个结构，你看Y塔camera在那边，U不对劲啊，Camera这一层问题跟U是不是应该也是一模一样的，也是一个十。是不是你待会去关了嘛。是不是你我们说你待会看不就是这什么白是这什你要去瓜的吧，是不是，那你看看看给个ID吗？是不是ID叫什么。那我还不如不给真逗来看了是吧？好，所以你来个什么？

抽你啊，这个Y是不能写在什么CS里面，一定要干嘛，通过GS来控制吧，是不是OK怎么办？Camera什么点D应该什么document.document element点是吧，是看点H是不是应该等什么。啊，多多。好OK，这里是不是拿到他们来了啊，好，拿到之后我们来看一下，现在看完这啊。怎么没变啊？看是不是。你看这层是不是这么大了，你看他们俩是不是叠到一块了啊，看一下这个LY是不是应该也是在一块了，没毛病，是不是现在怎么办，LY应该有什么。

LYY应该有个位景图，是不是半克光等于什么URL底下的什么面底下的是不是B点偏加来看在哪刷一下，是不是在这发现这张图是不是原图进来的，想让它跟适合适合一模一样的怎么办？百客观的S这个我们之前才学过，百分百百分百走你。OK，过来了，是不是上面是不是应该有个层，这个层怎么办？一个image等于什么牛什么image是不是，然后怎么办？image.src等于什么image底下的是吧a.PG嘛。

是不是好进来怎么办？Imagine点什么？On漏嘛，套路不要忘了，方嘛D转了是不是OK，走你怎么办？下面干嘛？D一个嘛，换个形干什么？对，写了很多遍了吗？走，你。咋了？Ctx点什么？是不是我们说是谁。这就是个音麦多高多宽，是这个后面是放什么，它的拼音量拼音量啊。圣品呢？专业面向。忘了。专你们讲偏一量高分嘛，是不是我说偏量是不是零零高分，不然的话你拿的是不还是他的一个自己。是需要指定码，就他的宽高吗？怎么了，不是他的宽应该是是口的，也就是说拿看分包也行。

是不是啊，OK，好。这好上来了，现在我们外层是一层开va，里面是一个UU下有个LY，现在我们应该把这层开刮开来。刮开来，底下就是看见的大洋湾。是不怎么管。怎么挂？是不是得写时间啊？你得点到开瓦斯身上吧，是吧，那怎么办？什么？移动端没有的，移动端可以可以不要用，他其实大。它其他相当于欧斯大，只不过是移动端手指点上去的一个时间，这个时间我们放到后期，我们会主动去讲，先跟他打个照面，真的OK，只要你。

回调函数吧，给回调函数大下，现在是不我他上去了，你他要去拿到什么，每次我点上来干嘛，换圆吧。咱不管我们每次上来画圆吧，先是吧，OK，是不是每次点他要玩画圆啊，那是不是得知道你点的位置啊，你点的位置嘛，手指距离十口的一个距离吗。是不是啊，其实精确的话，应该手指距离矢口的距离减去你这个开的平移量。因为现在我这开发式跟四口是重在一块的吗？所以说不会出问题吧，如果你开发式是这样的，你手指点上去的话，是不是应该拿你手指距离四口的一个距离减去你开本身的一个配量，这是不是你参照于开那个点。懂吗？啊，所以说我们还是按照什么之前的规则写懂不懂，OK，是不是得拿到我们手指的一个配料是吧？那这边是不是有个一好切记移动端你要拿到手指Y一个什么？首先你可以做个兼容，EV等于E或者E问是吧？走你问你，你是不是十根手指啊，你要拿到当中一根棒是吧？Tou tou c touch啊，这代表你的手指列表。

懂不懂一般我知道他是C好等于什么e.change的。Ch change的touch t。想清掉想红了清洁的，他就是去拿当中的第一根手指，懂吧，这是代表你手指点上去的那个手多懂，你想想吧，你你想你是十根手指呢，你咋知道你两根手指在上面去画，我是不是得拿到当做一根啊，这就当做那一根，这个代表手指列表。

这个E身上有个叫庆洁的touch，这个代表手指列表，去拿当中的第一根。懂吗？以后都拿这第一根作为乘高物，懂不懂相当于你就是一根柱子，在吗？给不着花，能不讲这个以后也会洗角，你先知道一下。能理解吗？那问你现在这个批量。什么touch c，什么clean，什么clean client。X减去什么？能不能用this可以吗？就不用了，用什么看什么是吧。他其实点可能他减去他是不。

能不能讲OK，然后呢，在这个点上就画什么。是不是啊，怎么花园啊？想想先写套路，因为你在一个一步里面就把这个套路写好，CTXDCTT。OK，好，CTS.c好，这begin pass是不是啊，在你们班上这心惊肉跳的所，你认是认是到啊，OK，走，你然后怎么办？去画路径嘛，你要画圆码CT，什么2ARC啊，我这先说了啊好改过来好圆心在哪XY吧啊走你XY是吧，半径多自己指定嘛，是吧，给个40是吧，画个圆码。是不是三百六乘以点派除以一百八方向不管了，是不是整理应该能画圆上去了。

不能还得画，我只是路径嘛，点不用是不是，所以你看。点上去，点上去。是不是啊，可是不是我们想要的效果，每次点下去的时候，我们应该只留下目标超出的那一部分，是不是，那应该干嘛？每次说干嘛，我们是不是应该写这边ctx减什么。叫什么什么？不出来了，是不是叫global，是你。就他了，应该那什么也行吧，来看应该什么只留下什么目标超过的是是不是啊是不是啊，这点这零来看一下行不行，而且它跟我们这个变换样式是不是一样的，它会受这个线根是多的影响的，能理解吗？OK，重点看一下，现在我每次点上去看到没有，点出来了吗？是不是，然后呢，有点大好哒哒哒，来老师走你。

好，现在怂不怂了啊，小了吧，现现现在唱什么。拖的时候也得干嘛，画圆吧，那个嘛，一个叫他其那个叫什么他七。一个叫欧斯，一个叫欧斯木马，那一个叫他，一个叫他木马，你手指移动时候嘛，一模一样的嘛，是不是，只不过这边干嘛问你能不能begin pass。之前的路径要不要清掉，不能这个你干掉。是不是你在这边重新画一个嘛，是不是啊，OK，来看一下行不行。这就做完了。

是不是？可是他看哪，你这是什么鬼啊？开了。太快的时候干明显是有问题的，为什么再看啊，我是非的吧，你看是不是问题很大，是不是这个题这个天一点都不好吧，OK，我们说能换什吗。能还原吗？你看我划的很快的时候，为什么这样呢？我问你啊，你这个他木或者说莫斯木触发是有条件的吗？可能是你滑几下数触发一次，可能是按照这种情况，应该是可能是几秒钟去发一次吧。是吧，可能什么0.5微微秒出，或者说一毫秒出发一次吧，所以你划的很快，你看你还的慢了是吧，划的很快是不有间隙的，那肯定不能这么做啊，那我知道今天能不能还圆。不能画圆，肯定不能画圆，是不是画线，画线怎么能画出一个圆柱来呢？大想现出点就是个圆啊，两边圆头就可了，是不？那怎么办？我在这边应该怎么画ctx点什么move to到哪个点啊？还是XY这个点。

没有没没有问题啊，画一条线ctx点人啊，这个线稍微画短一点，因为我只需要圆嘛，我只想这样，你画一条很短的线，两边有圆。就可以了，懂吗？那吗，我问你，我这边加一能加一吗？你管网是不是啊，我画线我应该怎么办，这是不啊来看一下中间点上去有没有线，有这个线太短了是不是怎么办？我把这个线变宽一点，怎么变宽一点写在C5下面是不是是吧，这条什么人坏死，比如说我等一个事实。

是吧，来看一下走点，哎，我每次点上去是不是就出来了是吧，让他两天干嘛。加帽子吗？帽子是不加上去的，两边加帽子是不远是远吧，两边加帽怎么叫人看？等于round，肉肉是玫瑰的意思，又问我，看诶，是不是圆，每次错的时候怎么办？的时候应该画线还是画圆啊画线？能吗？To，什么？不是这个XY吗？这不是你手指移动时XY吗？是吗？那就有这个XY？是是，这边应该怎么办？

样式大看是不是得全部贴过来了，我不想贴怎么办？我这在外面行不行，可不可以啊？那其实这个还需要写吗？不需要想，因为我在外面听到嘛，有了一份了。是不是你看一下。慢点，叔叔在哪跳舞快点。我说你没发现我转弯的时候是不干嘛，今天呢？转弯时候渐渐的两边是不是圆圆的，为什么转弯的时候。今天的OK，比如说我再搞点什么，明显一点。你看是不是有这种尖尖的毛色，干嘛人交易？人交易应该也是人的。是吧，你来看看，说下看见没有。

看见没有，是不是就就出来了，你看这个是不是就很平滑了，不管你用户怎么办，都我肯定是个圆，而且肯定是连续的，可是现在有个不好的地方，你每次都这样自己全部报完。是吧，我们说刮到一半你手指抬起来时，干嘛自动把其他的清掉了是吧？那这个我们待会再做优化，应该你们知道应该怎么做，就是项目操作。肯定要判断像素的是吧，我们先做这一块是吧，我们说这个我们是在上面画圆吗。不是，我们在画线，只不过线有两个圆头而已，懂吗？OK，好。