JavaScript学习小结之使用canvas画“哆啦A梦”时钟
前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~
之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的hello world,也算是一种进步咯~
好的各位,请上车的乘客往里走,请不要堵塞通道,谢谢。我们开车吧~
正文:
今天先上图吧,看看效果再说
今天的蓝胖子长这样,看到它还是这么胖,我就放心了。这世界还是充满正能量的,总归还有人比我胖,哈哈哈
然后是上代码
html部分
<canvas id="myCanvas" width="500" height="500">快去升级浏览器吧~</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则是指针的颜色。
function drawTime(context,theArc,theLength,color="#000"){ //保存当前的画布环境,和restore方法配合使用能够恢复画布上下文 context.save(); //旋转画布,rotate传入的参数代表旋转的弧度 context.rotate(theArc); //开始一条新的子路径,我们开始画指针啦 context.beginPath(); //将开始点移动到(0,0) context.moveTo(0,0); //画一条到(theLength,0)的路径 context.lineTo(theLength,0); //用指定的color颜色画这条路径 context.strokeStyle = color; //路径的宽度为2 context.lineWidth = 2; //路径是不可见的,如果要看到路径,需要用stroke来描线,而如何描这条线,可以由我们以上用到的几个属性来定义 context.stroke(); //恢复上下文 context.restore(); }
虽然接近尾声啦,但是还有一个很重要的clearTime函数,要是没有它,你的时钟会被密密麻麻的秒针占领的,关爱密集恐惧症患者,我们人人有责
function clearTime(context){ //我们开始一条新的子路径,然后描绘一个充斥着好看蓝色的圆,把我们之前画的指针都遮盖住,相当于清除了一次表盘 context.beginPath(); context.arc(0,0,80,0,2*Math.PI,false); context.fillStyle = "#4ba2cf"; context.fill(); //很不幸,我们的蓝胖子也被误伤了,所以再召唤它一次吧,决定就是你啦,皮卡丘(?咦) var image = new Image(); image.src = "2.png"; //这个坐标和第一次加载的坐标不同,因为我们修改了变换矩阵,还记得吗?所以,它们的坐标应该是互补的 context.drawImage(image,-75,-75,150,150); }
嗯啦,ok,现在是真的到此为止啦,差不多该去吃饭咯~各位可爱的程序猿们要记得吃饭哦~
相关文章
- 这篇文章主要为大家详细介绍了js canvas实现滑块验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
JavaScript+html5 canvas绘制的小人效果
这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下...2016-01-29JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
这篇文章主要介绍了JS基于ocanvas插件实现的简单画板效果,结合实例形式分析了ocanvas插件实现画板的相关技巧,并附代码demo源码供读者下载参考,需要的朋友可以参考下...2016-04-06- 这篇文章主要给大家介绍了关于微信小程序对图片进行canvas压缩的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-12
- 这篇文章主要为大家详细介绍了js canvas仿支付宝芝麻信用分仪表盘,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-11-22
- 这篇文章主要为大家详细介绍了使用js和canvas实现时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-08
- 这篇文章主要为大家详细介绍了WPF InkCanvas绘制矩形和椭圆,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了Canvas实现放大镜效果完整案例分析(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
html+css+js实现canvas跟随鼠标的小圆特效源码
这篇文章主要介绍了html+css+js实现canvas跟随鼠标的小圆特效源码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-15- 这篇文章主要为大家详细介绍了原生js canvas实现鼠标跟随效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-02
- 这篇文章主要介绍了JS使用canvas技术模仿echarts柱状图,对canvas感兴趣的同学,可以参考下...2021-04-30
- 这篇文章主要为大家详细介绍了js canvas实现圆形流水动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-19
- 这篇文章主要为大家详细介绍了canvas绘制刮刮卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-07
- 对于生成缩略图一般做法是通过后端语言php等来生成,但是为了给服务器减压,我们或许可以从前端来着手,先生成好不同尺寸的缩略图,传给后端,而后端只需要将前端传过来的图片进行存储就好了...2020-10-03
- 这篇文章主要介绍了JS+canvas五子棋人机对战实现步骤详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-05
HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)
这篇文章主要介绍了HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-25- 这篇文章主要为大家详细介绍了javascript利用canvas实现鼠标拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-24
- 本文给大家介绍基于JS+Canvas 实现下雨下雪效果,效果非常逼真,适应于各大网站,需要的朋友可以参考下...2016-05-20
- 这篇文章主要介绍了jQuery CSS3相结合实现时钟插件附源码下载的相关资料,需要的朋友可以参考下...2016-01-12
- 这篇文章主要为大家详细介绍了javascript使用canvas实现饼状图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-08