16_尚硅谷_h5_canvas实例-钟表.wmv原创

我们来看看啊，OK，现在咱们是不是这个盘画完了，OK，把这个盘打开好，再来复制什么点C啊，现在是不是做这个要完成这个什么钟表了零二。大家想想，我们做这个钟表跟我们用2D变换去写一样吗？思路完全不一样吗？是吧，OK。钟表啊，告诉他不是为了写钟表而去画钟表。能理解我意思吗？啊，咱们要需要把这个技术点干嘛用一下啊，看你们能不能去理解这种思路，那明天我们过来的实力都会比较贴近，呃，工程当的一些实例懂不懂，那明天我们会讲开发当中比较难的一块就是像素操作啊，今天我们压根没有处理到像素吧，所以跟他稍微去提了一下什么放大跟缩小这个这个像素的一个规则吧，是那明天我们讲他身上一些比较重要一点，那今天过的还是基础的一点，那大家看现在是不用看va怎么去写动画嘛，是不，他是不是得动啊，记住用看vas写动画就是覆盖就是覆盖，你不要想其他了。

懂不懂就是每次画个嘛，不一样不一样位置登上去把上一次给他清掉啊，就是这样的，懂不懂并不是说我每次在动他的位置。每次都在重新画。能理解吗？OK，那首先我们干嘛，我们先不要让它动的，我们先画一个什么四点半的出来呗，是不是啊，OK，我们来看。好，那比如说干嘛我们来画指引，好，这边我们是分针跟时针刻度吧，是不是OK，然后我们是不是得让钟表动起来了，是不是得画什么。这边都是刻度吧。是吧，我们现在给得画时针分针跟秒针吧，分秒。十分秒针，时针，我的天哪。怎么办？CTRLCCTRLV。时针什么？分针OK好，秒针是不是天无绝人针OK啊，其实还有什么？

圆盘是不是秒针还要干嘛，这个秒针还很傲娇，是不是他还有个头，看见没有啊，这个头应该是必须的，为什么？应该每次头换过去的时候，是不是我能看到指到几刻度上面的，是不是有一个提示作用的吧，是不是OK来看一下是针分针秒针盘，什么表盘。这个叫表做。是不是好只你那我们来看什么CTS点什么相对变向CS.abc5一下是不是啊，其实C5之前我们想想我们先干嘛，先C5完了再说。Begin。Pass OK，然后呢，是不是啊，OK，这个写完之后，我们看上了一个嘛。

首先你得把时间拿到嘛，挖一个date等于什么，DA等于什么，你date是是有一个对是吧，是DA啊，我们这么又过还有什么东西啊，又过又过是不是啊，OK，这里来看，比如说那我画一个首先应该算秒吧，是不是表是最小的一个维度的概念吗？是不是date点什么点get塔点。Get second是不是OK？要算分Y，一个分M应该等于什么？DA date点什么？Getin是不是得加吧？是不是得加什么？S除以60套路吧，是不是Y什么？H应该等什么d date.get o再加什么M除以60走你是不是好这边问你这边现在我们拿到这个六对塔里面这个H是不是24小时之吧，是不是我们来看这个码有点下这个H。

啊，虽然说对我们效果不会造成什么影响，是不是，可是我们说这可能会让我这个圈多转。是不是啊，那么就干嘛，我们要节约一点，那怎么办？好，H应该等于什么？如果你这个H大于12，应该等于什么H减12是不是要么是什么H。这能不能讲这边我去康点多给家听下这段四点多是吧，三务表达式吗？是吧，九点F12刷一下。

算一下，你看四点多是不是这能理解吗？OK，好，那这个H上面的控制是不是我们控的更细了，是不是？OK，那我们真正来画什么时针好，时针怎么画啊？其实这个东西我们写的是比较细的吧，不管是从分针的刻度还是从这个什么。12小时还是二二十四小时啊，是不是OK这里，那我们说时针怎么画。看一下时针那些参数嘛，时针吧，宽度为14吧，是，那我们这个宽度是不是得换一换，我们宽度默认给的是八吧，Ctx点什么，那Y等于14是不是OK，然后干嘛这个这应该怎么画。这个字应该怎么画？圆心外一出80，收25啊，收收20，这个什么鬼。看看圆心外往外走80，自己收20是不是，那就负20的，从负20这个位置开始画起。

画的正80嘛，是的，那只你干嘛负20的位置开始画起吧，那怎么办？cx.move多少负200是不是？看ctx点什么棱就多少800是不是，所以你看这个针有没有出来。没有，因为我没有画，是不是C点就走，你好，是不是出来了，能不讲OK，然后然后咋整。先让他转一次吧，转到我先转到我差不多差不多什么四点半的位置上来吧，是不是怎么转。在这边吧，Ctx，点什么时针吧，跟H有关系吧。

什么？一一小时多少？30度嘛是吧，30干嘛乘以慢点。除以明白吧，就你。哎，是不就过来了，对不对，下一次我干嘛把你干掉，重新换了表盘，我都干掉，整个表全部干掉，重新画个表。那么讲每次他动的时候，整个表盘会全部被干掉的，重新再画一个。懂吗？OK，走你那现在这个时针是不是就出来了，你要干嘛。CTRLC分针嘛，是不是啊，OK，看分针和画吧，来看下参数分针宽度为十吧，圆心Y128吗？是吧，宽度为十原先多。秒忘，感觉我属于八多少？

是不走你。哎，是不是在是不是在这儿，可是我们说你转的话，应该怎么转，跟分支有关系吧，一分钟转多少度啊，六度啊，折年37，三十三十五，3637正好是不是OK，折你是不是是37吧，没问题吧，现在换谁。秒针，最烦的就是秒针。好找你秒针怎么玩，秒针只你其他先不干，全部干掉是吧，就留下begin pass跟就留下这个什么套路呗是吧，OK，看下没在。颜色要改了，是不是不管是这个表盘还是什么，整个秒针的颜颜色全部改掉是，那怎么办？是这个颜色宽是六吧，宽也得改是吧，那怎么办？Ctx点了。

外问你，你套路写好了，你是不是写每一个模块的时候就不需要去考虑其他东西了，你只要考虑这个C5跟当中的时不是就可以了，是不是宽度会大。六吧，是不是C什么等于什么，这个玩意是不是可以了，OK，来看一下。圆心外一出80收30吧，是不是先花这个秒针，OK，圆心外多少？是把这个扣过来就行了，是不是啊，写到丙根下面吧，是不是啊，OK，我们说一说到。83收30吧，OK，收30往外走，83 83是不是把这些线。画一画，这里看一下。在哪？

是不是在这颜色不对吧，颜色为什么没有用上。哦哦哦，加紧加加加，不要凶啊，看是不过来了，OK，现在干嘛，圆圈是不是还没有啊，是不是圆圈怎么画。中心十圆半径为十嘛，直接干嘛，我们这个秒针的东西，我们就放到一块了啊，就放到这个C跟什么。放到这个税跟那个道之间嘛，反正你们的颜色都一样的嘛，是吧，也就是说现在咋咋整，要不然别跟pass。画另外一个图形了吧，要吧，OK pass试一下好，怎么办？CP点什么好？其实这边我可以稍微给你们来来点注释这个句划什么做。表做是不是OKCX什么丙pass，然后呢。

AC嘛，画圆吗？是不是半径为多少啊，不不，原先是不是002是不是零零。为什么？因为我是全局的吧。是不是这个东西是全局的嘛，是不是，那我这边是不是可以就写002OK，半径段十是不是零到三百六乘以点派除以一百八完事。是干嘛，C什么掉吧。是不是这的话就有问题了，上面这个颜色是不是没有。现在还是黑色吧，好，上面一个嘛，来一个feel。是不是I只你？上来过来了吧，OK，秒针这个度数是不是也要变变？OK，放，放到哪边？

比是上面吧，是不跟这个表做没有任何关系吧？C什么RO转多多。S乘以六是不是乘以点派除以一百八走你。好啊，秒差不多差不多，这差不多这么多秒吧，是吧，反正我也看不到秒是吧，来看看，然后然后咋整还得画这个头吧。是不是是不是还有个头秒头，OK干嘛CD什么begin pass是不是，然后呢，它这个图的参数吧，96码开外，96码开外半径为十的一个空心圆吧，什么鬼，96码开外我的天呐，我的宽度为六码，宽度是宽，宽度为六，不用改吧，本身就是六码是吧？咋整96码开外是什么鬼？

是不是参照他96码之外，是不是往前走96片是不是，因为我大家想想嘛，我整个这个线出去是多少。码是吧，圆的半径是吧，那加六码。还有个宽度段啊，这是宽度吧，我看参数啊，半径为十吧，那就到83加十。半径为什么是吧？在家多宽度为三码再加一半吗吗？

是吧？是不是啊，OK，那就是。往外走96嘛，是吧，咋走啊，Ctx点什么往外走96，想想这时候我们要去外面换人了。我来外面换圆吧，是不是还是换圆啊是吧，那干嘛CD什么二吧。圆心为多少？96吧。是不是啊，我不要去找这个圆心吗？96里嘛，那边讲，然后呢，画一个圆吗？是不是圆半径为多少十嘛，是不是圆不还是这样吗。是不是可以就C直接给你贴过来，只不过我们这时候我们画的就是什么ctx点什么，就是不是所以看一下。

现在是个什么鬼？想哎，就出来了。每次刷的时候它肯定会变嘛。是不是啊，懂吗？手动你怎么那么开心啊，好OK，来看一下，那干嘛，这叫半自动是不是啊，怎么办，现在现在怎么办，怎么玩，对全自动怎么让全自动定时器吗？是不OK，我们说其实这里面所有的逻辑干嘛是不是从这个事开始啊，到最后一个道，这里面这个东西每次都要执行。是不每隔一秒自行一次是吧，比如说这函数目不行是不可以啊，来一个方个形这个什么move走你不是递增嘛。

啊，地震我们还得投啊，OK，这里这里看一下。你不感觉有东西在震，好，这你是不是过来啊，现在这个木每次都被自信一次嘛，是不是啊，没毛病吧，看看。说下。吧，没清吧，我问你是不是每次我们都在画，是不干嘛，我们说执行的时候要干嘛，亲一下吧，那怎么办？这边交个方形是吧，他的操作比木来的多吧是吧，每次目之前干嘛ctx点肯定啊什么C啊肯什么。什么零零干嘛？整个嘛，点。刷一下。

是不是上来，是不是感冒，好像要延一会儿吧，上来是不是先执行一次啊。放放在哪都行是吧，OK说一下。有没有看见，是不就已经做完了，是不是OK，这里面问你写这个时候他也是有坑的。为什么他清楚？我们说是不是也去画矩形啊？你要记住你的原点一定是在这边，你清的才是。整个画不。懂不懂，你要是改了原点，比如说你把原点什么变成了这个点，那你轻的话不就这样。清不掉的，这边是清不掉的。这就很丑了，真的，所以说每次去清整个画布的时候，看一下原点有没有被动过，原点被动过的话干嘛是不行的，你要是50多干嘛把里面的原点给我重置回来，对不对，再再去清，这是清整个画布嘛，对不懂学到现在我们学到看va画布本身上的API有哪几个。

一个giness。两个三个，到现在就这三个，其他都是。画笔的。懂吗？啊，其他的是什么。都是画笔的啊，OK，只有只有他们三是什么？在画幅上的懂不懂真的那么诡异？OK，那看那整个是不是已经全部做完了，OK，切记我们说你用看va做动画的话，一定要配合定时器使用，不然是没有动画出来的，懂吗？其实我们C3里面这个变换，你像做动画的话也得配合什么。电视机使用吧，要么你就通过全三型，他是没有办法用，全在型的也是没有办法用，那么理解，OK，我先把视频停了，好，那这个就做完了。