<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>canvas-clock</title> </head> <body> <canvas id="myCanvas" class="canvas" width="150" height="150" style="border:1px solid #d3d3d3;margin: 0 auto;display: block;"> </canvas> <script> var clock = function(){ var canvas = document.querySelector("#myCanvas"); if(canvas && canvas.getContext) { var cxt = canvas.getContext("2d"); cxt.save();//保存状态 cxt.clearRect(0,0,150,150);//清理画布 cxt.translate(75,75);//以（75，75）为原点 cxt.scale(0.5,0.5);//缩放 cxt.rotate(-Math.PI/2);//逆转90° //======================================= //表盘 cxt.beginPath(); cxt.lineWidth= 30; var gld = cxt.createLinearGradient(0,0,50,75); gld.addColorStop(0,"#e0e3ec"); gld.addColorStop(1,"#9aa0a0"); cxt.strokeStyle = gld; var grd = cxt.createRadialGradient(0,0,0,0,0,150); grd.addColorStop(0,"#ccc"); grd.addColorStop(1,"#ccc"); cxt.fillStyle = grd; cxt.arc(0,0,135,0,Math.PI*2,true); cxt.stroke(); cxt.fill(); cxt.strokeStyle = "#969696"; cxt.lineCap = "square"; cxt.save(); cxt.lineWidth = 8; cxt.beginPath(); for (var i = 0;i<12;i++) { cxt.rotate(Math.PI/6); cxt.moveTo(100,0); cxt.lineTo(120,0); cxt.stroke(); } cxt.restore(); //分钟刻度 cxt.save(); cxt.lineWidth = 5; for(i=0;i<60;i++){ if (i%5!=0) { cxt.beginPath(); cxt.moveTo(132,0); cxt.lineTo(120,0); cxt.stroke(); } cxt.rotate(Math.PI/30); } cxt.restore(); var now = new Date(); var sec = now.getSeconds(); var min = now.getMinutes(); var hr = now.getHours(); hr= hr>12?hr-12:hr; //时针 cxt.save(); cxt.rotate(hr*(Math.PI/6)+(Math.PI/360)*min + (Math.PI/21600)*sec); cxt.lineWidth = 9; cxt.beginPath(); cxt.moveTo(-20,0); cxt.lineTo(70,0); cxt.stroke(); cxt.restore(); //分针 cxt.save(); cxt.rotate((Math.PI/30)*min+(Math.PI/1800)*sec); cxt.lineWidth = 6; cxt.beginPath(); cxt.moveTo(-28,0); cxt.lineTo(90,0); cxt.stroke(); cxt.restore(); //秒针 cxt.save(); cxt.rotate((Math.PI/30)*sec); cxt.lineWidth = 3; cxt.beginPath(); cxt.moveTo(-30,0); cxt.lineTo(120,0); cxt.stroke(); cxt.restore(); //中心点 cxt.beginPath(); cxt.fillStyle = "#969696"; cxt.arc(0,0,8,0,Math.PI*2,true); cxt.fill(); cxt.restore(); } } setInterval(clock,1000); </script> </body> </html>