首页 > 代码库 > 轻松实现HTML5时钟（分享下自己对canvas的理解，原来没你想像的那么难哦）
轻松实现HTML5时钟（分享下自己对canvas的理解，原来没你想像的那么难哦）
Hey,guys! 让我们一起用HTML5实现一下简易时钟吧！
接触canvas时， 我突然有一种非常熟悉的感觉------canvas的部分的功能其实和Photoshop中的 钢笔工具 是一样的。所以，如果你对 PS里的 钢笔工具 运用自如的话，恭喜你，canvas你将很快上手~~
说下对HTML5中canvas的理解，canvas翻译成中文就是画布，顾名思义，canvas当然是用来作画的啦~~
作画嘛，其实现的思想 与 photoshop 基本上是一样的~~，只不过photoshop可以用可视化工具， 而来到HTML5 / JS 就是用代码自己手敲而已。
所以总结一下： canvas 是用来画画的！至于你想画点什么，就是你自己的事咯！
canvas对象中getContext(‘2d‘)，就相当于是 PS里的 钢笔工具，下面说一下它们对应关系：
beginPath----> 开始画路径
moveTo -----> 路径开始点
lineTo -------> 拉直线路径到甘个点
clothPath ---> 闭合路径
stroke ------> 描边路径(这也是为什么当lineWidth设为大于1px时，如10px，它是从中间向两边各分一半的原因，PS里的 钢笔工具 就是这样的)
fill-----------> 填充路径
bezierCurveTo 和 quadraticCurveTo 更是 PS里的 钢笔工具 的精髓之处！
等等等等......
好，如果你感兴趣的话，可以去折腾一下 PS里的 钢笔工具 哦，相信会对你理解canvas对象中getContext(‘2d‘)的属性和方法有一定帮助
下面是HTML5时钟的实现代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="textml; charset=utf-8"> 5 <title>clock by html5</title> 6 <style> 7 body { 8 background: #333; 9 } 10 11 #canvas1 { 12 display: block; 13 width: 400px; 14 margin: 100px auto; 15 } 16 17 </style> 18 19 <script> 20 window.onload = function (){ 21 22 var oC = document.getElementById(‘canvas1‘); 23 24 var oCtx = oC.getContext(‘2d‘); 25 var x = 0; //圆心x 26 var y = 0; //圆心y 27 var r = 0; //圆心r 28 initialize(); 29 setInterval(DrawUpdate,1000); 30 31 function initialize(){ 32 33 x = 200; //圆心x 34 y = 200; //圆心y 35 r = 150; //圆心r 36 oCtx.strokeStyle = ‘#1ec1e4‘; 37 oCtx.fillStyle = ‘#333‘; 38 39 //画秒刻度 40 for(var i=0; i<60; i++){ 41 oCtx.beginPath(); 42 oCtx.moveTo(x, y); 43 oCtx.arc(x, y, r, i*6*Math.PI/180, (i+1)*6*Math.PI/180); 44 oCtx.stroke(); 45 } 46 oCtx.closePath(); 47 48 oCtx.beginPath(); 49 oCtx.arc(x, y, r-8, 0, 2*Math.PI); 50 oCtx.closePath(); 51 oCtx.fill(); 52 53 //画分钟刻度 54 oCtx.lineWidth = 2; 55 oCtx.beginPath(); 56 for(var i=0; i<12; i++){ 57 oCtx.moveTo(x, y); 58 oCtx.arc(x, y, r, i*30*Math.PI/180, i*30*Math.PI/180); 59 oCtx.stroke(); 60 } 61 oCtx.closePath(); 62 63 /* 64 在DrawUpdate中可以实现，就没必要了 65 oCtx.beginPath(); 66 oCtx.arc(x, y, r-12, 0, 2*Math.PI); 67 oCtx.closePath(); 68 oCtx.fill(); 69 oCtx.closePath();*/ 70 71 DrawUpdate(); 72 } 73 74 //负责更新时间 75 function DrawUpdate(){ 76 77 var iSecValue = 0; //秒针对应的刻度 78 var iMinValue = 0; //分针对应的刻度 79 var iHourValue = 0; //时针对应的刻度 80 81 var oDate = new Date(); 82 var iSec = oDate.getSeconds(); 83 var iMin = oDate.getMinutes(); 84 var iHour = oDate.getHours(); 85 iSecValue = (- 90 + iSec*6) * Math.PI/180; 86 iMinValue = (- 90 + iMin*6 + iSec/10)* Math.PI/180; 87 iHourValue = (- 90 + iHour*30 + iMin/2)* Math.PI/180; 88 89 //遮罩,覆盖原来的时间 90 oCtx.beginPath(); 91 oCtx.arc(x, y, r-12, 0, 2*Math.PI); 92 oCtx.closePath(); 93 oCtx.fill(); 94 95 //画时针 96 oCtx.lineWidth = 3; 97 oCtx.beginPath(); 98 oCtx.moveTo(x, y); 99 oCtx.arc(x, y, r*0.5, iHourValue, iHourValue);100 oCtx.stroke();101 102 //画分针103 oCtx.lineWidth = 2;104 oCtx.beginPath();105 oCtx.moveTo(x, y);106 oCtx.arc(x, y, r*0.8, iMinValue, iMinValue);107 oCtx.stroke();108 109 //画秒针110 oCtx.lineWidth = 1;111 oCtx.beginPath();112 oCtx.moveTo(x, y);113 oCtx.arc(x, y, r*0.9, iSecValue, iSecValue);114 oCtx.stroke();115 }116 }117 </script>118 119 </head>120 121 <body>122 <canvas id="canvas1" width="400" height="400">Hey,guys!您的浏览器版本也太低了吧，赶紧升级下吧，推荐Google Chrome哦！</canvas>123 </body>124 <html>
欢迎拍砖，如果bug, 请留言提醒， 觉得好帮忙点下 推荐哦~~--------------------------------------------------------------------------------------------------------------------------------------------↓
↓
↓
↓
↓
↓