canvas-时钟

实现步骤：

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>