HTML5 用canvas制作时钟的方法
2017-01-03 16:51
465 查看
用canvas制作漂亮的时钟
需求如下:
一:分析项目?
分析时钟的组成;分析需要的canvas技术;
代码实现;
美化效果。
二:时钟组成?
表盘(橙色)刻度(黑色)
时针(黑色)
分针(黑色)
秒针(橙色)
表盘中心样式(中心径向渐变)
秒针头部样式(圆圈嵌套)
三:分析需要的canvas技术?
基础知识需要自己看,此项目需要必须理解并且掌握的东西有:画表盘:绘制圆的路径技术,cxt.arc(6个参数);
绘制文本:即表盘上面的数字,会使用cxt.font、cxt.textAlign、cxt.textBaseline和cxt.fillTExt等绘制文本属性;
变换方法:rotate();
重新规定原点的方法:translate(x,y)
保存上文环境和输出上文环境方法的方法:save()和restore(),这两个方法一定要理解
代码如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>clock</title> <style media="screen"> #clock{background: #636051;} </style> </head> <body> <canvas id="clock" width="500" height="500"> 您的浏览器不支持canvas </canvas> </body> <script type="text/javascript"> var clock = document.getElementById('clock'); var cxt = clock.getContext('2d'); function drawClock(){ var now = new Date(); var hours = now.getHours(); var minute = now.getMinutes(); var sec = now.getSeconds(); //转换24小时进制转换为12小时进制 hours = hours>12 ? hours-12 : hours; //画图之前先清除画布 cxt.clearRect(0,0,500,500) //设置原点 cxt.translate(250,250); //表盘(蓝色) cxt.lineWidth = 20; cxt.strokeStyle = "#D78203"; cxt.fillStyle = "#EDEAE3"; cxt.beginPath(); cxt.arc(0,0,200,0,2*Math.PI,false); cxt.stroke(); cxt.fill(); cxt.closePath(); //刻度样式 var hour = [12,1,2,3,4,5,6,7,8,9,10,11]; for(var i=0; i<60; i++){ if(i%5 == 0){ cxt.save(); //填入小时的字体 var x = 160 * Math.cos((i/5*30-90)*Math.PI/180); var y = 160 * Math.sin((i/5*30-90)*Math.PI/180); cxt.font = "bold 18px Arial"; cxt.fillStyle = "#000"; cxt.textAlign = "center"; cxt.textBaseline = "middle"; cxt.fillText(hour[i/5],x,y); //小时的刻度标识 cxt.lineWidth = 8; cxt.strokeStyle = "#000"; cxt.rotate(i*30*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,-190); cxt.closePath(); cxt.stroke(); cxt.restore(); }else{ cxt.save(); cxt.lineWidth = 5; cxt.strokeStyle = "#000"; cxt.rotate(i*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-180); cxt.lineTo(0,-190); cxt.stroke(); cxt.closePath(); cxt.restore(); } } //时针样式 cxt.save(); cxt.lineWidth = 10; cxt.strokeStyle = "#000"; cxt.rotate((hours + minute/60) * 30 * Math.PI/180); cxt.beginPath(); cxt.moveTo(0,15); cxt.lineTo(0,-80); cxt.stroke(); cxt.closePath(); cxt.restore(); //分针 cxt.save(); cxt.lineWidth = 7; cxt.strokeStyle = "#000"; cxt.rotate((minute + sec/60)*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,20); cxt.lineTo(0,-130); cxt.closePath(); cxt.stroke(); cxt.restore(); //秒针 cxt.save(); cxt.lineWidth = 5; cxt.strokeStyle = "#D78203"; cxt.rotate(sec*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,25); cxt.lineTo(0,-160); cxt.closePath(); cxt.stroke(); cxt.restore(); //中心的圆圈 cxt.beginPath(); var gradient = cxt.createRadialGradient(0,0,1,0,0,6); gradient.addColorStop(0,"#fff"); gradient.addColorStop(1,"#615942"); cxt.fillStyle = gradient; cxt.arc(0,0,7,0,2*Math.PI,false); cxt.fill(); cxt.closePath(); //边缘中心的圆圈 cxt.save(); cxt.fillStyle = "#D78203"; cxt.rotate(sec*6*Math.PI/180); cxt.beginPath(); cxt.arc(0,-125,8,0,2*Math.PI,false); cxt.fill(); cxt.closePath(); cxt.restore(); //镂空秒针头部的圆圈 cxt.save(); cxt.fillStyle = "#fff"; cxt.rotate(sec*6*Math.PI/180); cxt.beginPath(); cxt.arc(0,-125,4,0,2*Math.PI,false); cxt.fill(); cxt.closePath(); cxt.restore(); //还原原点 cxt.translate(-250,-250); } setInterval(drawClock,1000); </script> </html>
相关文章推荐
- HTML5的绝活:巧用Canvas制作会动的时钟
- 使用html5 canvas 制作时钟
- 使用html5 canvas和javascript制作可调整时间的时钟界面
- 【html5】如何用HTML5中的canvas制作动画时钟呢?
- HTMl5与CSS3两种制作时钟的方法
- js+html5实现canvas绘制网页时钟的方法
- 最丑的时钟效果!js canvas时钟制作方法
- 使用HTML5 Canvas制作时钟理解马克
- html5之Canvas坐标变换应用-时钟实例
- html5之Canvas坐标变换应用-时钟实例
- html5 canvas 画的简易时钟
- HTML5 canvas save和restore方法讲解
- HTML5 canvas 可拖拽时钟
- 使用HTML5的canvas做一个会动的时钟
- HTML5_Canvas_属性、定义及方法(学习笔记)
- HTML5的CANVAS上绘制椭圆的几种方法
- 在HTML5的Canvas上绘制椭圆的几种方法
- HTML5 Canvas 2D arc方法使用说明
- HTML5 Canvas LED 时钟
- 提高HTML5 canvas性能的几种方法!