HTML5实现的时钟
这是一个用HTML5做的时钟，只是一个小练习，觉得和照片比较像，拿出来分享一下。这个时钟是自己的第一个html5动画练习，不足之处还望指点...
<!DOCTYPE HTML><html lang="en"> <head> <meta charset="UTF-8"> <title>practice---clock</title> <style type="text/css"> @font-face { font-family:DFGirl; src:url("./DFGirl.ttf"); src: local("DFGirl"), url("./DFGirl.ttf"); } canvas{ border:2px solid #; margin:px px; } </style> <!--> <script src="excanvas.min.js" type="text/javascript"></script> <! --> </head> <body> <canvas id='c'></canvas> </body> <script type="text/javascript"> window.onload = draw; function draw(){ var canvas = document.getElementById('c'); //You can change the width and height canvas.width = ; canvas.height = ; if(!canvas.getContext){ alert('Your browser don\'t support canvas!'); }else{ clock(canvas); //starts here } function clock(canvas){ var ctx = canvas.getContext('2d'); //背景色 ctx.fillStyle = '#E6E4E5'; ctx.fillRect(0, 0, canvas.width, canvas.height); //更改坐标系到中间 ctx.translate(canvas.width*0.5, canvas.height*0.5); //画底部阴影 var bottom_shadow = ctx.createRadialGradient(0, , , 0, ,); bottom_shadow.addColorStop(0, 'rgba(0, 0, 0, )'); bottom_shadow.addColorStop(0.4, 'rgba(, , , )'); bottom_shadow.addColorStop(0.9, '#E6E4E5'); ctx.fillStyle = bottom_shadow; ctx.beginPath(); ctx.arc(0, , , Math.PI*0.8, Math.PI*0.2, false); ctx.fill(); //底部桌面 var bottom_blank = 18; ctx.fillStyle = '#DFDFDF'; ctx.fillRect(-canvas.width*0.5, canvas.height*0.5-bottom_blank, canvas.width, bottom_blank); //白色外框 var frame_width = 18; var inner_radius = ; ctx.beginPath(); ctx.strokeStyle = '#FBFAF6'; ctx.lineWidth = frame_width; ctx.arc(0, 0, inner_radius + frame_width*0.5, 0, Math.PI*2, true); ctx.stroke(); //黑色内线 ctx.beginPath(); ctx.strokeStyle = '#'; ctx.lineWidth = 2; ctx.arc(0, 0, inner_radius + 2, 0, Math.PI*2, true); ctx.stroke(); //白色内遮罩 ctx.beginPath(); ctx.arc(0, 0, inner_radius, 0, Math.PI*2, true); ctx.clip(); setInterval(function(){time_animate(ctx);}, 0); } //时针函数 function get_hand_angle(h, m, s){ if(h>12) h -= 12; var h_angle = (h/6 + m/ + s/00) * Math.PI; var m_angle = (m/30 + s/0) * Math.PI; var s_angle = s/30 * Math.PI; return { 'h' : h_angle, 'm' : m_angle, 's' : s_angle } } function time_animate(ctx){ ctx.save(); ctx.clearRect(-, -, , ); var inner_radius = ; //图案背景 ctx.beginPath(); var img = new Image(); img.src = 'point.jpg'; var bg = ctx.createPattern(img, 'repeat'); ctx.fillStyle = bg; ctx.arc(0, 0, inner_radius, 0, Math.PI*2, true); ctx.fill(); if(window.ActiveXObject){ //IE HACK for(var i=-; i<; i+=70){ for(var j=-; j<; j+=70) ctx.drawImage(img, i, j); } ctx.beginPath(); ctx.strokeStyle = '#eee'; ctx.lineWidth = ; ctx.arc(0, 0, , 0, Math.PI*2, true); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = '#'; ctx.lineWidth = 2; ctx.arc(0, 0, , 0, Math.PI*2, true); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = '#fff'; ctx.lineWidth = 17; ctx.arc(0, 0, , 0, Math.PI*2, true); ctx.stroke(); } //数字 ctx.fillStyle = '#'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; var font_radius = ; //var font_family = '華康少女文字W6';//只有opera能用 var font_family = 'DFGirl'; for(var angle=Math.PI/6,i=1; i<13; angle += Math.PI/6, i++){ if(i%3 == 0){ font_radius = ; ctx.font = '65px ' + font_family; }else{ ctx.font = 'bold 30px ' + font_family; font_radius = ; } //ctx.fillText(i.toString(), font_radius*Math.sin(angle)-5, -font_radius*Math.cos(angle)-4);//中文少女体微调数字位置 ctx.fillText(i.toString(), font_radius*Math.sin(angle), -font_radius*Math.cos(angle)); } //内阴影 if(!window.ActiveXObject){ //NOT IE ctx.translate(10, -10); var inner_shadow = ctx.createRadialGradient(0, 0, , 0, 0, ); inner_shadow.addColorStop(0.1, 'rgba(0, 0, 0, 0)'); inner_shadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.1)'); inner_shadow.addColorStop(1, 'rgba(0, 0, 0, 0.8)'); ctx.beginPath(); ctx.fillStyle = inner_shadow; ctx.arc(0, 0, , 0, Math.PI*2, true); ctx.fill(); } var now = new Date(); //显示指针 var time = get_hand_angle(now.getHours(), now.getMinutes(), now.getSeconds()); var h_width = , h_height = 7; var m_width = , m_height = 4; var s_width = , s_height = 2; var outside_width = 35; ctx.shadowOffsetX = 6; ctx.shadowOffsetY = 3; ctx.shadowBlur = 4; ctx.shadowColor = '#aaa'; ctx.fillStyle = '#'; ctx.rotate(time.h); ctx.fillRect(-h_height*0.5, -h_width+outside_width, h_height, h_width); ctx.rotate(time.m-time.h); ctx.fillRect(-m_height*0.5, -m_width+outside_width, m_height, m_width); ctx.rotate(time.s-time.m); ctx.fillRect(-s_height*0.5, -s_width+outside_width, s_height, s_width); ctx.rotate(-time.s); ctx.shadowColor = 'rgba(0, 0, 0, 0)'; //重画一次时针，解决阴影覆盖本身的指针 ctx.rotate(time.h); ctx.fillRect(-h_height*0.5, -h_width+outside_width, h_height, h_width); //中间的固定圈 ctx.beginPath(); ctx.strokeStyle = '#'; ctx.lineWidth = 4; ctx.arc(0, 0, 6, 0, Math.PI*2, true); ctx.stroke(); ctx.restore(); } } </script></html>
页:
[1]