15_尚硅谷_h5_canvas实例-表盘.wmv原创

那接下来的时间啊，我们要完成一个案例，这算相当于是个阶段性的案例啊，OK，相当于是今天的课你有没有听懂啊，就看这个案例啊，你能不能做出来，好，我们来画一个始终啊，那今天讲的都是一些基本的API啊，可是我感觉开发性的API难不难啊，可是让你们思想上的转变很大。懂吗？啊，就你要把浏览之前学的任何CSS的渲染原理要忘的一干二净，是不是你要单独去搞一个什么看法自己的体系，因为炫的炫的原理是完全不一样的吧。是不是老师说看法是难是难在这一块跟其他东西不一样，能理解啊，可能跟你自己的之前之前的思维是有很大冲突的啊，你如果能把这些坎搞清楚，而且你能对比的去学啊，那整个效果是特别好的。啊，你如果这个坎你要如果过不了。那怎么办，过不了，过不了你就来问我，你你必须要过对吧，这个坎过不了的话，说实话还是对你来说比较痛苦的好，我们来看这个时钟，我们先来画什么呢？先来画个表盘。

OK。好，我们要做这个钟表吗？是吧？OK，课件也打开了。好，大家看到我底下是不是有一些钟表的参数的是吧，咱们先这个表盘，OK，那最终我们要做出一个什么东西来呢？大家看啊，最终做出一个这这个东西来吧，咱们先把它放大啊，OK，我们先把它放大。怎么放大呢？其实这个缩放我先不说放来，我来先放大是吧，咱们把这个表盘先给它画出来，就里面的针你暂时不要改，不要管表白，我们我们先给他干嘛，用coms的形式给它画出来，看能不能画出来。OK，这里。好，我们说中表好，那我们就重新开始画了零一，OK，我们画表盘好，就你画个表盘好，那表盘肯定得有个看法，是啊。

元素是不是OK，比如说就说什么COC吧，Clock是不是中的意思吧，是不是OK，那Y是干嘛，我们说一定要用什么是吧，比如说给400 400这个问题不大是不是，所以这个东西还有问题，出门左转，左转再左转是不是OK，交不了了，这里懂吗？为零是不是，为零是不是，然后呢，比如说干嘛我让这个。这个中嘛是吧，居中是吧，还有呢，我们说得叫什么。得让这个HTL得让body是不是OK为百分百OK，那这些都是我们常规操作吧，你都得做的呗的是吧，给个背景色吧，那我就同一起的吧，白光给粉色是吧，他也给个背景色，白光的PI是吧，OK，我们什么。

吧，是OK，我什么left为58%，OK，然后呢，Top也为58%，是然后呢，啊干嘛TRANS3D是吧，走你负的50%，负的50%，最后一个清息是零，OK，这里。也怎么什么都没有啊，都是pink嘛，那应该给成A，我刚是把。走，你看哪边问题。哪边？元素写错了是不是？

啊，是不是在这，是不是我是不是把那个关了，我的天。把我们的DEMO给关了啊，老师关找你关了DEMO怎么画？OK，是不是换成这样的好走，你来我们看怎么玩。好东西是不是出来了，好出来之后我们来看写吗？是不是window点是吧的，是不是OK点。On road等于function形折点是不是好？先拿到什么？拿到这个中码cck等于什么多可的点q query select去找谁？找这个中是不是好，找到这个中之后，我们说这就是看诉，那然到我们的换过了吧，那怎么办？夜判断一下，判断下你是否有画笔，CC什么get是不是，然后呢。

一个什么ctx等于什么？等什么clock.get是不是一定要知道我要拿的是一个2D的笔，是不是好拿这个笔去画是不是？首先大家看我们是不是得去画这个。画个圆啊，是啊，而且我们知道大家想想现在我们整个坐标是什么样。这样的是不是我们说最好我让它逆时针，让它转个90度转过来，这是X轴，这是。Y轴为什么待会我们的钟是不要干嘛这样转的，这样写的话，我们是干嘛稍微好受一点，可是你知道这根轴是L轴，这个轴是Y轴，因为我是逆逆时针转过来的嘛。

能不你讲好，那我怎么转？怎么ctx什么。是不是OK，先不要这么干干嘛？CTx.C套路先给我写起来，Ctx，什么begin pass。然后呢，什么套路来吧，OK，我们说变化相关东西在。上面是不是变化样式相关的东西吗？写在上面吗？好怎么写Ctx.u点的转多少度？负90度嘛，乘以点派除以180OK完事。

是不是坐标是不是就已经转过来了，是不是OK转过来了，诶我们现在肯定看不到是不是坐标已经转过来了，而情况点我们说这个圆点是不是影绕到这个圆圆心的是不是OK，那怎么办？Ctx点什么问你这个最好在上面还在下面。这个圆点最好在哪调？在这个旋转上面调还是在这个旋转下面？旋转上上面了下面条的话，是不是整个坐标系它它都已经变了是吧，是OK，所你这个算起来就比较麻烦了吧，我们说C什么全连差多少，我总共是400的那边200。是不是OK，走你那我看现在是不是相当于原点在这了，坐标系我们也调过来了，是不是现在我们要去画个什么。画个圆吗？怎么画圆C什么啊，是不穿圆心圆圆圆圆多。

怎么原先？的。是不是玲玲你上面已经动过一次，是不是我原先就应该是这个点。是不是啊，那就应该写零零嘛。是不是我原点是不是就已经在我的圆心上了？是不是OK，那就是零零是不是OK，半径多少？半径不知道啊，是不是看有没有说。半径外层空心圆盘吧，半径一百四吧，是吧，跟我说外层的这个空空心圆盘吗？半径一百四吧，那走你那就应该吧。一百四是不是还有啥。其实角度我要换一个圆嘛，就你吗，其实也不用不用它就是个圆码给我们最好写的规整一点是吧，你不知道在哪一款浏览器下就会出问题吗？点哈除以一百八是不是顺时针逆程就不管了，反正我是个圆是不是OK现在干嘛，这是路径吧CX点九是不是，只要你看我们肯定画了一个圆柱了。

是不是好，可是我们说这个圆其实有粗细的是不是好，然外是吧，一般我们来看啊，这边我写了，那一般这是我们初始化的一些样式啊，初始化样是斜了，现在就在外面好OK，周里这些都是初始化的样式，懂不懂啊，线的宽是八颜色默认是黑色，懂吗？然后什么帽帽子是。圆的，等会我这边是不是过来了，只不过我们说我们这个圆盘的样式什么干嘛。你看我们这边是不是跟pass了圆盘的样是不是不一样的，是不是OK，我们在这边是要画这个外层共形圆盘嘛。

那我这边我们是去画外层工序圆盘嘛，外层空具圆盘嘛，OK，我们是最好画图形就干嘛。相当于我第一个save跟道是做什么的初始化工作的，懂吗？这里面这个C跟道是画空心圆盘呢，懂吗？你里面有些样式，如果你不用改的是不是就干嘛继承他们的，如果你要改的呢，比如他的颜色C什么康style是我说那我这边这个begin好的嘛，还得。放在这边嘛，是吧，那这个平方其实可以不要的。是不是啊，可是为了我们这个书，书写稍微规范一点，还是给他干嘛？留着吧。能理解吗？OK，那这边干嘛，我们说我们要干嘛，应该等一个颜，等一个颜色吧，好，至于什么颜色啊，我这边有。这个颜色CTRLC圆盘宽度为40是什么鬼？

啊，它的线的宽度我们是不是默认给的是八。啊，它其实稍微粗一点等等，那我们可以把个码。把它给干嘛覆盖掉嘛，是吧，你初始化的时候八嘛，可是我比较特殊嘛，50多14嘛，走你那我就稍微粗一点嘛，那你讲其实你们看里面时针刻度啊，这这些刻度的宽度其实都都是八，只是我比你宽一点。能理解我的意思吗？OK，那我们大家看空心圆盘是已经画完了，是不是？OK，走，你现在该画什么，画里面什么了？空心圆盘是不是画完了？是不是里面画这个时针刻度也就C画时针刻度好，画时针刻度一样，先把套路写起来，CDx.C5是吧，我记得我跟你们说过一句话，我说最后你写代码能从思路写成套路，那你就赢了。

啊，很好，我没说过啊，我肯定说过吧，是不是好尴尬，来看一下，OK，好，大家看，现在我是要画这个刻度啊，这个刻度其实我们先画这里第一个刻度，它其它其实就是一条线。是不是OK？来看这个刻度上面的样式，长20，宽八。外层空心圆盘与时针刻度之间的距离为20。这个这是没啥，这里面是不是有段距离，这段距离为20，懂不懂本身我这个长度为多。长度也为20，距离也为28 OK，整理宽度为什么？想想那应该怎么画？怎么画？怎么画先什么C点吗？摩托吧，摩托到一个点吗？我先摸这个点吗？再网上去换个线就行吗？这个点的做标不到。

零是吗？是零吗？记住现在这根轴就X轴是不是OK，这个刻度应该到这个应该多少，首先我说到这边是不是一百四啊。是吧，到到哪边百色到这个点是140。是不是我们说我们这个圆心到什么半径是不是一百四嘛，是不是半径140，想想我们说其实到这边应该多少。一百二是是多少，你说我这个原点到这边应该多少，本身他是20是不OK，我们说这个圆盘到到这个宽度也是二，那这个点多100。

李。是不是应该从1000换1000换到哪。120度嘛，因为我整个宽度应该多少啊，整个长度是什么？一百二嘛，是不是啊，也就是我摸出摸出到哪边。零八是吧，记住坐标系我已经换过了，是不是转过一次了，OK，你换到什么。1000C什么120是不是OK，我们说然后干嘛，Ctx点的嘛，是画填充还是画线，画线嘛，两个点嘛，只不过我这个线比较粗嘛，是吧，OK，而且这个圆头的嘛。是不是给干嘛，是不是看有没有出来。

求你是不是过来能不理解，然后干嘛算转出来不就行了吗？是不是怎么办，我们说是不是我时针刻度这边是要负循环的，是不是，大家想想现在负循环这个save跟要不要for，要不要这个负循环到里面去啊。不用，因为我这边压根没有控制样式，也没有控制变换，你如果控制样式跟变化了你干嘛。应该放进去吧，这时候没有控制嘛，那怎么办？相当于干嘛负循环，我写在这边刻度总共多少个二小于12，二加这个12不会变的嘛，写死他嘛是吧，走你这边是不是直接进来就可以问你这个要不要写在里面。一定要写在里面嘛，不然这些线是不是会被描多次的，是不是怎么少了个木啊？CTS点什么move to1000这个位置吧，是不是啊，可是我问你每次画的时候是不是要去转的。

是不是每次画要转的吧，那想想。怎么办？Ctx什么第一个应该转转多少度啊？12个嘛，30度一个嘛，是不是乘以点派除初夜100是不OK，看着神奇的事情出现了。为什么？为什么？我是不是只写的是一行代码，全部转开来了吗？为什么？开当中的变换是累加的，第一个转30度，第二次再来执行的时候就是60了，30加30加30连，连续加了十二十就到累加，有没有好处，有是是有好处的，能解吗？我问你这个能写进。

能写进来吗？能吗？写进来还有累加吗？写进来就没累加了。而且为什么第一个画的是在这边呢，第一个你看第一个转30度嘛，然后你再去画。能用累加吗？不不不，你能把它写在里面吗？切记不能。把它放到外面去，我们要让它慢慢自己累加起来。能理解吗？只要你。看是不是过来了。OK，是不是很完美，OK，然后然后什么然后其实就是套路了吧，一样的吧，画完时画什么。分针嘛，是不是分针怎么画，是不是就差分争了？喂，表面上是不是就差分争了，是不是OK画什么分针刻骨嘛是吧，分针刻度的吗？我们来看一下分针刻度折年。

分针刻度长，宽度为四吧，长为三吧，是不是宽度为四长为三，那这个宽度是干嘛不一样的。那怎么办？重新设置吧，这边是不在这边是吧？C什么人应该是是不是OK，然后呢，宽度是长度为三是位置得变了。OK，这个点应该多少？比如说干嘛，我这边应该也有一个嘛，是吧，这个点位到多吧，到二吧，是不是OK走你那怎么办，是不是这个再来。就知道啊，换这个换成多少一百一十七零嘛，是吧，这个应该多少60嘛是吧，这个应该多少多少六是吧，那应该是也出来了。

是不就出来了，可是我们这边干嘛，是不是问你在这个时针刻度底下我也瞄了一点，需要秒吗？不要我吹毛求疵，性能高点我不想聊。是不是啊，怎么办啊，小小啊三了咋不能肯定吧，肯定就没了是不是啊，判断我在这边我不要去画了，是不是啊，其实我们说这是第几根。我们的循环从哪开始的，从零开始嘛，是不是零五十十五。都不要画。是不是啊，OK，怎么办？

零五十，15都不要花怎么办？其实那是就是。怎办？怎么办，反正我干嘛，我们说这个话的时候是话是什么句话。话有没有限制啊有。是不是啊，可是问你转要不要转。画你不画，你转你得转吧，这个度数你得给我转过来吧，是吧，是你说这个这个东西是每次情况都要执行的，他呢。他呢，他不一定是不是应付什么。I取魔取魔五，I取魔五，如果等等于零就不要画是吧，如果不等于零就应该去啊画是不是啊，不等于零时候去画嘛，是不是啊，可是大家想想我第一根是不画的，什么六度那边的来看一下周那是不是稍微稍微有点偏了。

因为我第一根花的是六嘛，那怎么办？给不给啊？少年是吧？上来我画第一根的是什么？你没有转过吗？是不是啊，你看我上来画第一根，他让你画吗？第一根让你画吗？不让画第二根的时候已经赚了六多了，那这才是我画的第一笔。能理解吗？那所以说这个东西应该要写到下面去。能不理解？可不可以理讲，如果你非得想把它写到上面的，是不是这个判断要改的，你非得写到上面的问题应该怎么改？问你，你非得写到上面的，你画的第一第一笔在哪？在这边第一笔没画吗？

这笔没换吗？是不是，可是我已经转了六度了嘛，就你I等于一的时候，其实是它嘛，是不是，这是I等于什么二的时候嘛，就所以我们应该怎么办，这个判断应该怎么改。判断怎么改，其实这是X等于一的时候嘛，1234。五。12345嘛，哦不对，这第一笔应该是I等于零的时候吧，是不是这个是I等于什么零的时候吧，01234嘛，也就四多少。56789嘛，四九。多少十段少14啊，是不是啊，那这个规则是不是不怎么好找，是不是啊，规则不怎么好找，其实也能找这个规则个规则应该怎么想，就是干嘛四不能画，九不能画，14不能画吧，也就说这个时候，哎这个时候应该得多是。

四九十四嘛，是不是啊，那怎么办？I加一取模五，对I加一取模五的时候，如果等于不等于零，我再去换是不是啊，那我这边是I加一一定要加括号，是不是取模五不等于零的时候再去画找你那也是一样的。那么讲两种方案嘛，那按照我的话，我喜欢把它写到下面去是吧，因为我觉得算这个对我来说负在太大了啊，OK，整理，那我是不是再看整个刻度是不是就出来了，表盘是不是就出来了是吧，现在是不是就差这个灯了。那这个针我们下节课再画，等等你先把这个表盘的代码给我看懂。啊，看懂表表盘代码，你再继续等等，表盘代码里面比较重要的就是什么，C跟头的运用到底该放在哪。

懂吗？OK。