HTML5小时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> canvas{ background: #eee; } </style> <script> window.onload=function(){ var con=document.getElementById('con'); var oCanvas=con.getContext("2d"); var startX=200; var startY=200; var radius=100; setInterval(function(){ oCanvas.clearRect(0, 0, 400, 400); // 阴影 oCanvas.shadowColor="#888"; oCanvas.shadowOffsetX=1; oCanvas.shadowOffsetY=1; oCanvas.shadowBlur=3; // 渐变 var grd=oCanvas.createRadialGradient(startX, startY,1, startX, startY,100); grd.addColorStop(0, '#efefef'); grd.addColorStop(1, "#cecece"); oCanvas.fillStyle=grd; oCanvas.lineWidth=5; oCanvas.beginPath(); oCanvas.strokeStyle="#a34"; oCanvas.arc(startX, startY, radius, 0, 2*Math.PI); oCanvas.stroke(); oCanvas.fill(); // 去掉阴影 oCanvas.shadowColor="#888"; oCanvas.shadowOffsetX=0; oCanvas.shadowOffsetY=0; oCanvas.shadowBlur=0; // 画刻度 dragMark(); var myDate=new Date(); var H=myDate.getHours()*30+myDate.getMinutes()/2-90; var M=myDate.getMinutes()*6-90; var S=myDate.getSeconds()*6-90; // 时针 dragT("#000",4,55,H); // 分针 dragT("#888",3,65,M); // 秒针 dragT("#f10",2,80,S); // 画中心点 oCanvas.beginPath(); oCanvas.fillStyle="#ccc"; oCanvas.arc(200, 200, 6, 0, 2*Math.PI); oCanvas.fill(); }, 1000); function dragT(color,lw,radius,angle){ oCanvas.beginPath(); oCanvas.strokeStyle=color; oCanvas.lineWidth=lw; oCanvas.moveTo(startX, startY); oCanvas.lineTo(startX+radius*Math.cos(angle*Math.PI/180), startY+radius*Math.sin(angle*Math.PI/180)); oCanvas.stroke(); } function dragMark(){ for(var i = 0; i < 60; i++) { var lw=2; var radius1=radius-5; var angle=i*6*Math.PI/180; oCanvas.strokeStyle="#888"; if (i%5==0) { radius1=radius-8; lw=3; oCanvas.strokeStyle="#666"; }; // if(i%15==0){ // var s=(i*6-90)*Math.PI/180; // oCanvas.fillStyle="#000" // oCanvas.fillText(i/5, startX+(radius-15)*Math.cos(s), startY+(radius-15)*Math.sin(s)); // } oCanvas.lineWidth=lw; oCanvas.beginPath(); oCanvas.moveTo(startX+radius*Math.cos(angle), startY+radius*Math.sin(angle)); oCanvas.lineTo(startX+radius1*Math.cos(angle), startY+radius1*Math.sin(angle)); oCanvas.stroke(); }; } } </script> </head> <body> <canvas width="400" height="400" id="con"></canvas> </body> </html>
效果图~
