带电子时钟显示的模拟时钟

就是很简单的一个时钟。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style=" background-color: black"></canvas>
<script>
    window.onload=function(){
        run();
    }
//获取canvas对象
    var cvs=document.querySelector("#myCanvas");
//获取绘画的环境
    var cxt=cvs.getContext("2d");
//加载图片进来
    var img = new Image();
    img.src="img/1.png";
//加载run()函数
    window.onload=function(){
        run();
    }
function run(){
//获取时间
    var data=new Date();
    var h = data.getHours();
    var m = data.getMinutes();
    var s = data.getSeconds();
//时分秒前面补0，显示更真实的数字时钟
    function bu(x) {
         x=x<10?"0"+x:x;
         return x;
    }
//拼接时间    
    var str=bu(h)+":"+bu(m)+":"+bu(s);
//把多的秒和分钟转化为分和小时，从而实现更真实的时钟走动
    h +=(m/60);
    m += (s/60);
//画圆
    cxt.save();
    cxt.beginPath();
    cxt.arc(250,250,200,0,Math.PI*2,true);
    cxt.strokeStyle="white";
    cxt.lineWidth="5";
    cxt.fill();
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
//裁剪图片
    cxt.clip();
//填充图片
    cxt.drawImage(img,-150,-50);
    cxt.save();
    cxt.beginPath();
    cxt.arc(250,250,10,0,Math.PI*2,true);
    cxt.fillStyle="red";
    cxt.fill();
    cxt.closePath();
    cxt.restore();

//画刻度
  //画小时的刻度
    for(var i=0;i<12;i++){
        cxt.save();
        cxt.beginPath();
        cxt.translate(250,250)
        cxt.rotate(Math.PI*2/12*i);
        cxt.moveTo(0,180);
        cxt.lineTo(0,200);
        cxt.lineWidth="3";
        cxt.stroke();
        cxt.closePath();
        cxt.restore();
    }

  //画分钟的刻度
    for(var j=0;j<60;j++){
        cxt.save();
        cxt.beginPath();
        cxt.translate(250,250)
        cxt.rotate(Math.PI*2/60*j);
        cxt.moveTo(0,190);
        cxt.lineTo(0,200);
        cxt.lineWidth="2";
        cxt.stroke();
        cxt.closePath();
        cxt.restore();
    }

  //画时针
    cxt.save();
    cxt.lineWidth="10";
    cxt.strokeStyle="pink";
    cxt.translate(250,250);
    cxt.rotate(h*Math.PI*2/12);
    cxt.beginPath();
    cxt.moveTo(0,10);
    cxt.lineTo(0,-110);    
    cxt.closePath();
    cxt.stroke();
    cxt.restore();

  //画分针
    cxt.save();
    cxt.beginPath();
    cxt.translate(250,250)
    cxt.rotate(m*Math.PI*2/60);
    cxt.moveTo(0,10);
    cxt.lineTo(0,-150);
    cxt.lineWidth="6";
    cxt.strokeStyle="orange";
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
  //画秒针
    cxt.save();
    cxt.lineWidth = 3;
    cxt.strokeStyle = "#FF0000";
    cxt.translate(250, 250);
    cxt.rotate(s * 6 * Math.PI / 180);//每秒旋转6度
    cxt.beginPath();
    cxt.moveTo(0, 10);
    cxt.lineTo(0, -170);
    cxt.stroke();
    cxt.closePath();
  //美化表盘，画中间的小圆
    cxt.beginPath();
    cxt.arc(0, 0, 7, 0, 360);
    cxt.fillStyle = "cyan";
    cxt.fill();
    cxt.strokeStyle = "black";
    cxt.stroke();
    cxt.closePath();
  //秒针上的小圆
    cxt.beginPath();
    cxt.arc(0, -140, 7, 0, 360);
    cxt.fillStyle = "cyan";
    cxt.fill();
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
  //文字
    cxt.save();
    cxt.font="15px 微软幼圆";
    cxt.strokeStyle="white";
    cxt.textAlign="center";
    cxt.strokeText("Desigin By chenng_7",250,370)
  //绘制文字
    cxt.fillText("Desigin By chenng_7",250,370);
    cxt.restore();
  //绘制电子时钟
    cxt.save();
    cxt.beginPath();
    cxt.font="17px 微软雅黑";
    cxt.strokeStyle="cyan";
    cxt.textAlign="center";
    cxt.strokeText(str,250,330);
    cxt.closePath();
    cxt.restore();
    }
  //定时器
    setInterval("run()",1000);

    </script>
</body>
</html>
加载图片进来的时候改下图片路径即可。
看下运行结果
运行效果
带电子时钟显示的模拟时钟

猜你喜欢
