首页 > 代码库 > HTML5之Canvas时钟(网页效果--每日一更)
HTML5之Canvas时钟(网页效果--每日一更)
今天，带来的是使用HTML5中Canvas标签实现的动态时钟效果。
话不多说，先看效果：http://webfront.verynet.cc/pc/canvas-clock.html
众所周知，Canvas标签是HTML5中的灵魂，HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域。即时模式是指在画布上呈现像素的方式，
HTML5 Canvas通过JavaScript调用CanvasAPI，在每一帧完全重绘屏幕上的位图。详细将在下面代码进行说明。
HTML结构代码：
1 <canvas id="canvas" width="500" height="500">2 您的浏览器不支持Canavas标签,请升级浏览器再查看此页面!3 </canvas>
CSS样式代码：
1 <style type="text/css">2 *{margin:0px;padding:0px;}3 .canvasbox{margin:50px auto;background:#dadada;width:500px;}4 </style>
JS脚本代码:
1 <script type="text/javascript"> 2 var canvas = document.getElementById("canvas"); 3 //获取Canvas的2d上下文对象 4 var context = canvas.getContext("2d"); 5 6 //定义一个初始化函数 7 function init(){ 8 //先清除画布上的所有图像 9 context.clearRect(0,0,500,500); 10 11 //获取系统时间 12 var date = new Date(); 13 var hours = date.getHours(); 14 //因为钟表是12小时制,所以必须对时刻度进行控制 15 hours = hours > 12 ? hours-12 : hours; 16 var minutes = date.getMinutes(); 17 var seconds = date.getSeconds(); 18 19 //开始画表盘 20 context.beginPath(); 21 //在画布中心250,250点上画一个圆 22 context.arc(250,250,200,0,360,false); 23 //定义画笔的宽度 24 context.lineWidth = 10; 25 //定义画笔颜色 26 context.strokeStyle = "#000"; 27 //关闭绘画路径 28 context.closePath(); 29 //上色 30 context.stroke(); 31 32 //开始画刻度 33 //时刻度 34 for(var h = 0;h < 12;h++){ 35 //先将图像进行保存 36 context.save(); 37 context.lineWidth = 8; 38 context.strokeStyle = "#f00"; 39 //定义旋转中心点 40 context.translate(250,250); 41 //定义旋转角度 42 context.rotate(h*30*Math.PI/180); 43 context.beginPath(); 44 context.moveTo(0,190); 45 context.lineTo(0,170); 46 context.closePath(); 47 context.stroke(); 48 //将之前的保存的图像显示,形成新的图像 49 context.restore(); 50 } 51 //分刻度 52 for(var m = 0;m < 60;m++){ 53 context.save(); 54 context.lineWidth = 4; 55 context.strokeStyle = "red"; 56 context.translate(250, 250); 57 context.rotate(m*6*Math.PI/180); 58 context.beginPath(); 59 context.moveTo(0, 190); 60 context.lineTo(0, 180); 61 context.closePath(); 62 context.stroke(); 63 context.restore(); 64 } 65 66 //画时针 67 context.save(); 68 context.lineWidth = 8; 69 context.strokeStyle = "#000"; 70 context.translate(250,250); 71 context.rotate(hours*30*Math.PI/180); 72 context.beginPath(); 73 context.moveTo(0,10); 74 context.lineTo(0,-100); 75 context.closePath(); 76 context.stroke(); 77 context.restore(); 78 79 //画分针 80 context.save(); 81 context.lineWidth = 4; 82 context.strokeStyle = "#000"; 83 context.translate(250,250); 84 context.rotate(minutes*6*Math.PI/180); 85 context.beginPath(); 86 context.moveTo(0,10); 87 context.lineTo(0,-140); 88 context.closePath(); 89 context.stroke(); 90 context.restore(); 91 92 //画秒针 93 context.save(); 94 context.lineWidth = 2; 95 context.strokeStyle = "blue"; 96 context.translate(250,250); 97 context.rotate(seconds*6*Math.PI/180); 98 context.beginPath(); 99 context.moveTo(0,10);100 context.lineTo(0,-170);101 context.closePath();102 context.stroke();103 context.restore();104 }105 //调用定时器，在每秒刷新重绘新图像106 setInterval(init,1000);107 </script>
其中，蕴含着一个小BUG。在绘画时刻度和分刻度时，若颜色不一时，会出现重叠现象，因为在绘画时刻度后，再进行绘画分刻度，故小编将两刻度颜色设置为一致，避免该现象产生。当然，也可以通过判断去进行处理，小编就不在此进行处理。
在浏览该效果时，请使用支持HTML5的浏览器，以免影响浏览效果。
享受代码，享受生活，网页效果，每日一更。
HTML5之Canvas时钟(网页效果--每日一更)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。