JavaScript学习小结之使用canvas画“哆啦A梦”时钟

发布于 2017-03-29 18:15:50 | 14 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程，程序狗速度看过来！

JavaScript客户端脚本语言Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

这篇文章主要介绍了JavaScript学习小结之使用canvas画“哆啦A梦”时钟的相关资料,需要的朋友可以参考下

前言：今天看完了Js书的canvas画布那张，好开心~又是心爱的canvas~欧耶~

之前看到有人建议我画蓝胖子，对哦，我怎么把童年最喜欢的蓝胖子忘了，为了表达我对蓝胖子的歉意，所以今天画了会动的hello world，也算是一种进步咯~

好的各位，请上车的乘客往里走，请不要堵塞通道，谢谢。我们开车吧~

正文：

今天先上图吧，看看效果再说

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

然后是上代码

html部分

<canvas>快去升级浏览器吧~</canvas>

Js部分

window.addEventListener("load", function(){ //获取画布上下文 var context = document.getElementById("myCanvas").getContext("2d"); //判断上下文是否存在，存在则可以执行接下来的代码 if(context){ //开始一个新的子路径 context.beginPath(); //我们准备画两个同心圆作为时钟的边框 //画一个外面的大圆 context.arc(100,100,99,0,2*Math.PI,false); //以某种很好看的蓝色填充 context.fillStyle = "#315f9b"; context.fill(); //画大圆的边线 context.stroke(); //开始一条新的子路径， //此处是必须的，要不然之后填充的颜色会把之前的全部覆盖 context.beginPath(); //将开始点移动到(194,100)，用半径和圆心计算得出的点 context.moveTo(194,100); //画内部的小圆（圆神？） context.arc(100,100,94,0,2*Math.PI,false); //用另一种很好看的稍浅蓝色填充内部小圆 context.fillStyle = "#4ba2cf"; context.fill(); context.stroke(); //蓝胖子出现啦~ //创建一个Image对象，将它的src设置为蓝胖子的图片 var image = new Image(); image.src = "2.png"; //用上下文的方法drawImage将图片从点(25,25)开始画，画在边长150的矩形中 context.drawImage(image,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(context); } },false);

以上时钟的表盘都出现了，但是时钟之所以为时钟最重要的就是它能显示时间啊（废话），所以接下来就是画指针咯

nowTime函数部分

function nowTime(context){ //创建一个日期对象，用来获取本地的时间 var myDate = new Date(); //获取小时，分钟，秒钟 var myHour = myDate.getHours(); //将小时转换为12时制 if(myHour >= 12){ myHour = myHour-12; } var myMin = myDate.getMinutes(); var mySec = myDate.getSeconds(); //描绘小时 //用来存放当前小时在表盘上的弧度 var hourArc; //以3时作为圆周的起点，顺时针表示弧度 if(myHour < 3){ hourArc = 2*Math.PI-(3-myHour)*Math.PI/6; }else{ hourArc = (myHour-3)*Math.PI/6; } //当指向3,6,9,12时，正好为90°的倍数 //此处因为角度转换为弧度有偏差，所以特别处理下 switch(myHour){ case 0: hourArc = Math.PI*3/2;break; case 3: hourArc = 0;break; case 6: hourArc = Math.PI/2;break; case 9: hourArc = Math.PI;break; } //调用drawTime函数，在表盘上画出小时针 drawTime(context,hourArc,60); //描绘分钟 //用来存放当前分钟在表盘上的弧度 var minArc; //以15分作为圆周的起点，顺时针表示弧度 if(myMin < 15){ minArc = 2*Math.PI-(15-myMin)*Math.PI/30; }else{ minArc = (myMin-15)*Math.PI/30; } //处理分钟，依然是此处因为角度转换为弧度有偏差，所以特别处理下 switch(myMin){ case 0: minArc = Math.PI*3/2;break; case 15: minArc = 0;break; case 30: minArc = Math.PI/2;break; case 45: minArc = Math.PI;break; } //调用drawTime函数，在表盘上画出分钟针 drawTime(context,minArc,80); //描绘秒钟 //用来存放当前秒钟在表盘上的弧度 var secArc; //以15秒作为圆周的起点，顺时针表示弧度 if(mySec < 15){ secArc = 2*Math.PI-(15-mySec)*Math.PI/30; }else{ secArc = (mySec-15)*Math.PI/30; } //处理秒钟，依然依然此处因为角度转换为弧度有偏差，所以特别处理下 switch(mySec){ case 0: secArc = Math.PI*3/2;break; case 14: secArc = 0;break; case 29: secArc = Math.PI/2;break; case 44: secArc = Math.PI;break; } //调用drawTime函数，在表盘上画出小时针 drawTime(context,secArc,80,"red"); //设置一个超时调用函数，每一秒超时调用nowTime更新时钟 setTimeout(function(){ //调用画新的指针前，当然应该要清除下原来的时针吧，用clearTime函数，真的好用！ clearTime(context); //把闲杂指针清除了，再画一次当前的指针吧~ nowTime(context); },1000); }

那么，我们具体是怎么操作上下文画出指针的呢？我也不知道，所以，我们今天就到此结束吧~

开玩笑啦，嘿嘿,take it easy（一定要假装被我整到哈）

接下来是drawTime函数，它一共有四个参数（context,theArc,theLength,color="#000")，context一眼看穿是画布的上下文，theArc则是我们要旋转画布的角度，theLength代表指针的长度，color则是指针的颜色。