HTML5 canvas--可动的时钟

HTML代码

<canvas id="mycanvas" width="600" height="600">你的浏览器不支持HTML5</canvas>

JS代码

var myCanvas=document.getElementById("mycanvas"); var ctx=myCanvas.getContext("2d"); function drawClock(){ //清除canvas里所有图形 ctx.clearRect(0,0,myCanvas.width,myCanvas.height); //获得当前时间 var now=new Date(); //格式： Date {Tue Aug 16 2016 10:54:19 GMT+0800} var hours=now.getHours(); var mins=now.getMinutes(); var secd=now.getSeconds(); var str=hours+":"+mins+":"+secd; hours=hours+(mins/60); //转为12进制 hours=hours>12?hours-12:hours; //背景圆 ctx.save(); ctx.beginPath(); ctx.lineWidth=6; ctx.arc(300,300,200,0,2*Math.PI,true); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.font="16px 华文行楷"; ctx.fillText("Made In China",250,430); ctx.closePath(); ctx.beginPath(); ctx.font="16px 华文行楷"; ctx.fillText(str,250,30); ctx.closePath(); ctx.restore(); //刻度原理：每转一次，画一条线段 //1.分刻度 for ( var i=0;i<60;i++ ) { ctx.save(); ctx.lineWidth=2; ctx.strokeStyle="#000"; //将画布的原点坐标转换成(300,300)，时刻度同理 ctx.translate(300,300); //旋转角度 ctx.rotate((i*6)*Math.PI/180); ctx.beginPath(); //分针长度为10 ctx.moveTo(0,192); ctx.lineTo(0,182); ctx.closePath(); ctx.stroke(); ctx.restore(); } //2.时刻度 for ( var i=0;i<12;i++ ) { ctx.save(); ctx.lineWidth=3; ctx.strokeStyle="#000"; //数字，但是坐标写死了 ctx.font="20px 楷体"; ctx.fillText("12",290,145); ctx.fillText("1",380,170); ctx.fillText("2",435,225); ctx.fillText("3",460,308); ctx.fillText("4",435,392); ctx.fillText("5",380,450); ctx.fillText("6",295,472); ctx.fillText("7",209,446); ctx.fillText("8",150,392); ctx.fillText("9",128,308); ctx.fillText("10",150,225); ctx.fillText("11",208,170); ctx.translate(300,300); ctx.rotate(((i+9)*30)*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,195); ctx.lineTo(0,175); //原理是对的，但是数字会因为画布的转动而颠倒故不采取 //ctx.fillText(i+1,100,135); ctx.closePath(); ctx.stroke(); ctx.restore(); } //3.时针 ctx.save(); ctx.lineWidth=7; ctx.strokeStyle="black"; ctx.translate(300,300); ctx.rotate(hours * 30 * Math.PI / 180); ctx.beginPath(); //时针长度 ctx.moveTo(0, -130); ctx.lineTo(0, 10); ctx.closePath(); ctx.stroke(); //时针三角形 ctx.beginPath(); ctx.moveTo(0,-135); ctx.lineTo(-3,-125); ctx.lineTo(3,-125); ctx.closePath(); ctx.stroke(); ctx.restore(); //4.分针 ctx.save(); ctx.lineWidth=5; ctx.strokeStyle="blue"; ctx.translate(300,300); ctx.rotate(mins * 6 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(0, -160); ctx.lineTo(0, 10); ctx.closePath(); ctx.stroke(); //分针三角形 ctx.beginPath(); ctx.moveTo(0,-160); ctx.lineTo(-5,-150); ctx.lineTo(5,-150); ctx.closePath(); ctx.stroke(); ctx.restore(); //6.秒针 ctx.save(); ctx.lineWidth=3; ctx.strokeStyle="red"; ctx.translate(300,300); ctx.rotate(secd * 6 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(0, -170); ctx.lineTo(0, 10); ctx.closePath(); ctx.stroke(); //画交叉点,即圆心 ctx.beginPath(); ctx.arc(0, 0, 5, 0, 360, false); ctx.closePath(); ctx.fillStyle = "gray"; ctx.strokeStyle="red"; ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(0, -150, 5, 0, 360, false); ctx.closePath(); ctx.fillStyle = "gray"; ctx.strokeStyle="red"; ctx.fill(); ctx.stroke(); ctx.restore(); } //每隔1秒画一次 setInterval(drawClock,1000);