使用JavaScript学习总结画布绘制“哆啦a梦”时钟

前言：今天看完了Js书的画布，好开心~又是心爱的画布~ ouye ~

之前看到有人建议我画蓝胖子。哦，我怎么能忘记童年最喜欢的蓝胖子？为了表达对蓝胖子的歉意，今天画出动人的hello world是一种改进~

好了，各位，请上车。请不要阻塞通道。谢谢你。我们开车吧~

文本：

今天先拍照，看看效果

今天的蓝胖子长这样，看到他还这么胖我就放心了。这个世界还是充满正能量的，总有人比我胖，哈哈哈

然后是上层代码

Html部分

画布ID='我的画布'宽度=' 500 '高度=' 500 '快去升级你的浏览器~/canvasJs

Window.addeventlistener ('load '，function(){//get canvas context varcontext=document . getelementbyid(' my canvas ')。get context(' 2d ')；//判断上下文是否存在，如果存在，可以执行下一个代码if(context){//启动一个新的子路径context . begin path()；//我们要画两个同心圆作为时钟的框架。//画外圆context.arc (100，100，99，0，2 * math.pi，false)；//用漂亮的蓝色填充上下文。context . fill()；//绘制大圆context.stroke()的边缘；//开始一个新的子路径。//这里有必要，不然后面填充的颜色会用context.beginPath()覆盖前面所有的颜色；//将起点移动到(194，100)，计算点上下文，移动到(194，100)有半径和中心；//在里面画一个小圆(圆神？)context.arc(100，100，94，0，2*Math。PI，假)；//用另一个漂亮的略带浅蓝色的上下文填充内圈。context.fillStyle=' # 4ba2cfcontext . fill()；context . stroke()；//蓝胖子出现~//创建一个Image对象，将其src设置为蓝胖子的图片var Image=new Image()；image . src=' 2 . png '；//用context方法从点(25，25)开始画图，画成边长150的矩形。语境。drawImage(图像，25，25，150，150)；//移动变换矩阵//移动(100，100)作为新原点，即(0，0)context.translate(100，100)；//用同样漂亮的蓝色绘制我们的时间点上下文. context.fillStyle=' # 02285a//fillText第一个参数是要绘制的字符串，第二个参数是x，第三个参数是y//下面的x。y值是调试后的效果。请根据不同情况进行调整。context.fillText('12 '，-5，-80)；context.fillText('6 '，-4，87)；context.fillText('3 '，80，1)；context.fillText('9 '，-86，1)；//稍后详细说明nowTime(上下文)这个函数；}}，false)；以上时钟的表盘都出现了，但时钟最重要的是可以显示时间(废话)，所以下一步就是画指针了

NowTime函数部分

函数nowTime(context){//创建一个日期对象，以获取本地时间变量myDate=new Date()；//获取小时、分钟和秒var myHour=mydate . gethours()；//如果(myHour=12){myHour=myHour-12，则将小时转换为12小时；} var myMin=mydate . getminutes()；var MySec=MyDate . GetSeconds()；//描述小时//用于在表盘上存储当前小时的弧度var hourArc//以3点为圆的起点，顺时针表示弧度if(my hour 3){ hour arc=2 * Math . pi-(3-my hour)* math.pi/6; } else { hour arc=(my hour-3)* Math。PI/6；}//指向3，6，9，12时，正好是90的倍数。//这里因为角度到弧度的转换有偏差，所以switch(my hour){ case 0: hour arc=math . pi * 3/2特别处理；打破；案例3:小时弧=0；打破；案例6:小时弧=Math.PI/2;断裂；案例9:小时弧=数学。PI；打破；}//调用drawTime函数，在表盘上绘制时针drawTime(上下文，hourArc，60)；//描绘分钟//用于存储表盘上当前分钟的弧度var minArc//以15分钟为圆的起点，顺时针表示弧度if(myMin 15){ minac=2 * Math . pi-(15-myMin)* math.pi/30; } else { minac=(myMin-15)* Math。PI/30；}//处理分钟，还在这里，因为角度到弧度的转换有偏差，所以switch(mymin){ case 0: minarc=math . pi * 3/2是专门处理的；打破；案例15: minarc=0；打破；案例30: minarc=Math.PI/2;断裂；案例45:minArc=数学。PI；打破；}//调用drawTime函数，在表盘上绘制分针drawTime(上下文，minArc，80)；//描绘秒//用于存储表盘上当前秒的弧度var secArc//以15秒为圆的起点，顺时针表示弧度if(my sec 15){ secArc=2 * Math . pi-(15-my sec)* math.pi/30; } else { secArc=(my sec-15)* Math。PI/30；}//处理秒，还是这里，因为角度到弧度的转换有偏差，switch(my sec){ case 0: secarc=math . pi * 3/2是专门处理的；打破；案例14: ecarc=0；打破；案例29: ecarc=Math.PI/2;断裂；案例44:secArc=数学。PI；打破；}//调用drawTime函数，在表盘上绘制时针drawtime (context，secarc，80，' red ')；//设置一个超时调用函数，调用nowTime更新时钟setTimeout(函数(){//在调用绘制新指针之前，当然要清除原来的时针。使用clearTime功能真的很简单！clearTime(上下文)；//清除空闲指针，重新绘制当前指针~nowTime(上下文)；},1000);}那么，我们如何操作上下文来绘制指针呢？不知道，今天就到这里吧~

开玩笑的，呵呵，悠着点(一定要假装被我忽悠了)

接下来是drawTime函数，它有四个参数(context，ArAc，theLength，color=' # 000 ')。上下文是画布的上下文，弧线是我们要旋转画布的角度，长度代表指针的长度，颜色是指针的颜色。

函数drawtime (context，arc，length，color=' # 000 '){//保存当前画布环境，可以和restore方法一起使用，还原画布上下文context . save()；//旋转画布。rotate传入的参数表示旋转上下文的弧度。//开始一个新的子路径，让我们开始画指针。context . BeginPath()；//将起点移动到(0，0)上下文. moveTo(0，0)；//绘制到(长度，0) context.lineTo(长度，0)的路径；//用指定的颜色上下文绘制此路径. context.strokeStyle=color//路径的宽度为2 context . line width=2；//路径不可见。如果你想看到路径，你需要用描边来描线。如何追踪这条线可以通过我们上面使用的几个属性来定义。//还原上下文. restore}虽然快结束了，但是还有一个非常重要的clearTime功能。没有它，你的时钟会被密集的秒针占据。照顾重症恐惧症患者是我们的责任

函数clearTime(context){//我们开始一个新的子路径，然后画一个满是漂亮蓝色的圆，覆盖我们之前画的所有指针，相当于把dial context.beginPath()清零一次；context.arc(0，0，80，0，2*Math。PI，假)；context.fillStyle=' # 4ba2cfcontext . fill()；//很遗憾，我们的蓝胖子也是意外受伤，所以再打一次，决定权在你，皮卡丘(？yi)var Image=new Image()；image . src=' 2 . png '；//这个坐标和第一次加载的坐标不一样，因为我们修改了变换矩阵，还记得吗？因此，它们的坐标应该是互补的上下文。drawimage(图像，-75，-75，150，150)；}嗯，好了，现在真的结束了。快吃饭了~亲爱的可爱的程人要记得吃饭~