实现步骤:
1.创建canvas标签,设置width,height,id
2.获取canvas执行上下文,画表盘,封装(render)函数,清除整个画布(为之后指针动清除影子),包含刻度,小时刻度加重,小时文本,
3.画出指针,封装函数(drawGuid),获取时间,把时间转换角度画出,
4.设置定时器,执行render,drawGuid函数
效果图:
HTML:
<canvas width="600" height="600" id="c"></canvas>
CSS:
body{ text-align: center; } #c{ background: #FEFEFE; }
JS:
<script> document.body.onload=start; function start(){ var canvas=document.getElementById("c"); var ctx= canvas.getContext('2d'); var width=canvas.width; var height=canvas.height; var r=width/2; // 画静态表钟打底 function render(){ // 清除打底画布 ctx.clearRect(0,0,width,height); // 画轮廓圆 ctx.save(); // 原点移动到中心 ctx.translate(width/2,height/2); ctx.beginPath(); ctx.strokeStyle="#333";/*轮廓圆的颜色*/ ctx.lineWidth=r*0.05;/*轮廓圆宽度*/ ctx.arc(0,0,r-r*0.05,0,2*Math.PI); ctx.stroke(); ctx.closePath(); // 画园中圆 ctx.beginPath(); ctx.lineWidth=1; var r2=r*0.85; ctx.arc(0,0,r2,0,2*Math.PI); ctx.stroke(); ctx.closePath(); // 画刻度 var hour=[6,5,4,3,2,1,12,11,10,9,8,7],i=0; for(var deg=0;deg<360;deg+=6){ // 求刻度X,Y坐标, var scaleX=r2*Math.sin(deg*Math.PI/180); var scaleY=r2*Math.cos(deg*Math.PI/180); var scaleR=r*0.02;/*刻度半径*/ ctx.beginPath(); ctx.fillStyle="#CBCBCB"; if (deg%30===0){ ctx.fillStyle="#323232"; // 个别刻度加深 ctx.arc(scaleX,scaleY,scaleR,0,2*Math.PI); // 求文本x,y var textR=r*0.025; var textX=(r2*0.85)*Math.sin(deg*Math.PI/180); var textY=(r2*0.85)*Math.cos(deg*Math.PI/180); ctx.font=r*0.1+"px Arial"; ctx.textBaseline="middle";/*水平对齐*/ ctx.textAlign="center";/*锤子对齐*/ ctx.fillText(hour[i],textX,textY); i++; } ctx.arc(scaleX,scaleY,scaleR,0,2*Math.PI); ctx.fill(); } ctx.restore(); } render(); drawGuid() // 画表中时针 function drawGuid(){ // 获取当前电脑时间 var curDate=new Date(); var hour=curDate.getHours(); var minute=curDate.getMinutes(); var second=curDate.getSeconds(); drawHour(hour,minute); drawMinute(minute,second); drawSecond(second) } function drawHour(h,m){ ///24h转换12小时,360分12份 h%=12; h=h+m/60; // 每一份转动角度30 var deg=30; ctx.save(); ctx.translate(width/2,height/2) ctx.beginPath(); ctx.strokeStyle="#323232"; // 旋转现在小时(份数)*每一份度数=》再换算弧度制 ctx.rotate(h*deg*Math.PI/180); ctx.lineCap="round"; ctx.lineWidth=r*0.1*0.6; ctx.moveTo(0,0); ctx.lineTo(0,-r*0.6*0.8); ctx.stroke(); ctx.closePath(); ctx.restore(); } function drawMinute(m,s){ m=m+s/60; var deg=6; ctx.save(); ctx.translate(width/2,height/2); ctx.rotate(m*deg*Math.PI/180); ctx.beginPath(); ctx.lineCap="round"; ctx.lineWidth=r*0.2*0.2; ctx.moveTo(0,0); ctx.lineTo(0,-r*0.8*0.8); ctx.stroke(); ctx.closePath(); ctx.restore() } function drawSecond(s){ ctx.save(); ctx.translate(width/2,height/2); ctx.rotate(s*6*Math.PI/180); ctx.beginPath(); ctx.lineCap="round"; ctx.strokeStyle="#FE0E55"; ctx.moveTo(0,0); ctx.lineTo(0,-r*0.85); ctx.stroke(); ctx.closePath() ctx.restore() } setInterval(function(){ render() drawGuid() },1000) } </script>