canvas炫酷时钟

实现的功能

• 主要用到canvas的一些基础api
• 直接看效果

html：

   <canvas id="myCanvas" width="500" height="500"></canvas>

css：

   #myCanvas{position: absolute;top: 50%;left: 50%;margin-top: -250px;margin-left: -250px;}

js：

    var myCanvas = document.getElementById('myCanvas');var ctx = myCanvas.getContext('2d');ctx.strokeStyle = '#00ffff';ctx.lineWidth = '15';ctx.shadowBlur = '20';ctx.shadowColor = 'black';function draw(){//获取时间var date = new Date();var today = date.toDateString();var h = date.getHours();var m = date.getMinutes();var s = date.getSeconds();var ms = date.getMilliseconds();var s_ms = s + ms/1000;//背景var grd =ctx.createRadialGradient(250,250,50,250,250,300);grd.addColorStop(0,'red');grd.addColorStop(1,'black');ctx.fillStyle = grd;ctx.fillRect(0,0,500,500);//时分秒圆弧// 360/12 * h 时ctx.beginPath();ctx.arc(250, 250, 200, 1.5 * Math.PI, formatdeg(360 / 12 * h - 90));ctx.stroke();// 360/60 * m 分ctx.beginPath();ctx.arc(250, 250, 170, 1.5 * Math.PI, formatdeg(360 / 60 * m - 90));ctx.stroke();// 360/60 * s 秒ctx.beginPath();ctx.arc(250, 250, 140, 1.5 * Math.PI, formatdeg(360 / 60 * s_ms - 90));ctx.stroke();ctx.font = '20px Arial';ctx.textAlign = 'center';ctx.fillStyle = '#00ffff';ctx.fillText(today,250,250);ctx.fillText(formatTime(h) + ' : ' + formatTime(m) + ' : ' + formatTime(s) + ' ' + formatMs(ms), 250, 280);  };setInterval(draw,40);//时间处理function formatTime(time){return ('0' + time).slice(-2);}function formatMs(ms){if(ms <10){return "00" + ms;}else if(ms <100){return "0" + ms;}else{return ms;}}//角度转弧度function formatdeg(deg){var fd = Math.PI / 180;return deg * fd;}

参考自：腾讯课堂渡一教育