• 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>
  • 相关阅读:
    matlab中 数据保留有效位数
    matlab的m程序转执行文件exe
    MFC创建好的对话框如何移植到新程序中
    STM32 ADC转换时间
    MFC修改窗口无标题和标题信息,修改执执行文件图标
    兔子慢的原因
    core2.1独立布署,报错的原因。
    修复安卓的bug
    2018-11-21 ko.pureComputed的使用
    2018-11-17 js的this引起的血案
  • 原文地址:https://www.cnblogs.com/liangfc/p/8387851.html
Copyright © 2020-2023  润新知