标签：对齐 pat rect minutes fill new date min 宽度
index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时钟</title> <style> div{ text-align: center; margin-top: 250px; } </style> </head> <body> <div> <canvas id="clock" width="400" height="400" style="border:1px solid #ccc;"></canvas> </div> <script src="./shizhong.js"></script> </body> </html> shizhong.js
var dom=document.getElementById(‘clock‘); var ctx=dom.getContext(‘2d‘); var width=ctx.canvas.width;//定义宽度 var height=ctx.canvas.height;//定义高度 var r=width /2;//定义半径 var rem=width /200;//定义钟的大小变化 //绘制外圆 function dranbackground(){ ctx.save();//保存当前环境状态 ctx.translate(r,r);//调动或移动 ctx.beginPath();//起始路径 ctx.lineWidth=10 *rem;//设置线条宽度 ctx.arc(0,0,r-ctx.lineWidth /2 ,0,2*Math.PI,false);//绘制弧形：X=0,Y=0,半径减去ctx.lineWidth/2宽度，起始路径，终点路径，为顺时针旋转 ctx.stroke();//绘制线条 // 绘制数字 var hours=[3,4,5,6,7,8,9,10,11,12,1,2];//12个小时 ctx.font=18 *rem+ ‘px Arial‘;//字体属性 ctx.textAlign=‘center‘;//左右对齐 ctx.textBaseline=‘middle‘;//上下对齐 hours.forEach(function(number,i){ var rad=2*Math.PI/12*i;//每一个小时数的弧度*i var x=Math.cos(rad)*(r-30 *rem); var y=Math.sin(rad)*(r-30 *rem); ctx.fillText(number,x,y);//在画布上绘制被填充的文本（文本，X轴，Y轴） }); //绘制妙钟点 for(var i=0;i<60;i++){ var rad=2*Math.PI/60*i;//每一个妙数的弧度*i var x=Math.cos(rad)*(r-18*rem); var y=Math.sin(rad)*(r-18*rem); ctx.beginPath();//起始点 //这条IF涵数是如果每隔5个小时的填充为黑色，否则为灰色 if(i%5===0){ ctx.fillStyle=‘#000‘; ctx.arc(x,y,2*rem,0,2*Math.PI,false); } else{ ctx.fillStyle=‘#ccc‘; ctx.arc(x,y,2*rem,0,2*Math.PI,false); } ctx.fill();//绘制填充 } } //绘制时针 function dranhour(hour,minute){ ctx.save();//保存当前环境状态 ctx.beginPath();//起点 var rad=2*Math.PI/12*hour;//弧度为圆圈/60秒*时针1点 var mrad=2*Math.PI/12/60*minute;//弧度为圆圈/60秒*分针30分 ctx.rotate(rad+mrad);//旋转为时针弧度+分针弧度 ctx.lineWidth=6*rem;//线条宽度为6 ctx.lineCap=‘round‘;//线条变圆 ctx.moveTo(0,10);//从X为0到Y为10 ctx.lineTo(0,-r/2);//画到X为0到Y为-R/2长度 ctx.stroke();//绘制线条 ctx.restore();//返回之前保存过的路径状态和属性 } //绘制分针 function dranminute(minute){ ctx.save();//保存当前环境状态 ctx.beginPath();//起点 var rad=2*Math.PI/60*minute;//弧度为圆圈/60秒*分针30分 ctx.rotate(rad);//旋转为分针弧度 ctx.lineWidth=3*rem;//线条宽度为3 ctx.lineCap=‘round‘;//线条变圆 ctx.moveTo(0,10*rem);//从X为0到Y为10 ctx.lineTo(0,-r+30*rem);//画到X为0到Y为-R+30长度 ctx.stroke();//绘制线条 ctx.restore();//返回之前保存过的路径状态和属性 } //绘制妙针 function dransecond(second){ ctx.save();//保存当前环境状态 ctx.beginPath();//起点 ctx.fillStyle=‘red‘;//填充为红色 var rad=2*Math.PI/60*second;//弧度为圆圈/60秒*秒针15秒 ctx.rotate(rad);//旋转秒针弧度 ctx.moveTo(-2*rem,20*rem);//从X为-2到Y为20 ctx.lineTo(2*rem,20*rem);//画到X为2到Y为20长度 ctx.lineTo(1,-r+18*rem);//画到X为1到Y为-R+18长度 ctx.lineTo(-1,-r+18*rem);//画到X为-1到Y为-R+18长度 ctx.fill();//绘制填充 ctx.restore();//返回之前保存过的路径状态和属性 } //绘制时针、分针、妙针中的白色圆点 function drandot(){ ctx.beginPath();//起点 ctx.fillStyle=‘#fff‘;//填充为白色 ctx.arc(0,0,3*rem,0,2*Math.PI,false);//X轴为0，Y轴为0，半径为3，起点为0，终点为2*Math.PI（圆圈），为顺时针 ctx.fill();//绘制填充 } function dran(){ ctx.clearRect(0,0,width,height);//清空指定图形像素 var now=new Date();//获取当前时间 var hour=now.getHours();//执行当前时针 var minute=now.getMinutes();//执行当前分针 var second=now.getSeconds();//执行当前秒针 dranbackground();//变量外圆值 dranhour(hour,minute);//变量时针值 dranminute(minute);//变量分针值 dransecond(second);//变量妙针值 drandot();//变量中心圆点值 ctx.restore();//返回之前保存过的路径状态和属性 } dran();//先执行一次 setInterval(dran,1000)//每秒执行一次
标签：对齐 pat rect minutes fill new date min 宽度
原文地址：http://www.cnblogs.com/xiaoyumi666/p/6035119.html
