h5时钟

最新推荐文章于 2020-07-03 12:30:13 发布

weixin_30781433

最新推荐文章于 2020-07-03 12:30:13 发布

阅读量54

点赞数

原文链接：http://www.cnblogs.com/liu-heng/p/6873826.html

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>H5时钟</title>
</head>
<body>
<canvas height="500" width="500" id="clock" style="background:url(bg.jpg)"></canvas>
<audio src="7987.wav" loop autoplay="autoplay"></audio>
<script>
    var can = document.getElementById("clock");
    var con = can.getContext("2d");
    
    function clock(){
        con.clearRect(0,0,500,500);
            //开始画圆
        con.beginPath();
        con.lineWidth=5;
        con.arc(250,250,200,0,360,false);
        con.closePath();
        con.stroke();
        //注释部分为刻度
        /*for(var i=0;i<12;i++){
            con.save();
            con.translate(250,250);
            con.rotate(i*30*Math.PI/180);
            con.beginPath();
            con.lineWidth=10;
            con.moveTo(0,200);
            con.lineTo(0,170);
            con.closePath();
            con.stroke();
            con.restore();
        }
        
        for(var j=0;j<60;j++){
            con.save();
            con.translate(250,250);
            con.rotate(j*6*Math.PI/180);
            con.beginPath();
            con.lineWidth=5;
            con.moveTo(0,200);
            con.lineTo(0,180);
            con.closePath();
            con.stroke();
            con.restore();    
        }*/
        //获得时间
        var tt = new Date();
        var hour = tt.getHours();
        var minu = tt.getMinutes();
        var sec = tt.getSeconds();
        hour = hour>12?hour-12:hour;
        //时针
        con.save();
        con.translate(250,250);
        con.beginPath();
        con.lineWidth=10;
        h = hour+minu/60;
        con.rotate(h*30*Math.PI/180);
        con.moveTo(0,-130);
        con.lineTo(0,20);
        con.closePath();
        con.stroke();
        con.restore();
        
        //分针
        con.save();
        con.translate(250,250);
        con.beginPath();
        con.lineWidth=7;
        m = minu+sec/60;
        con.rotate(m*6*Math.PI/180);
        con.moveTo(0,-170);
        con.lineTo(0,20);
        con.closePath();
        con.stroke();
        con.restore();
        //秒针
        con.save();
        con.translate(250,250);
        con.beginPath();
        con.rotate(sec*6*Math.PI/180);
        con.moveTo(0,-210);
        con.lineTo(0,20);
        con.closePath();
        con.stroke();
        con.restore();
        //小圆点填充
        con.save();
        con.translate(250,250);
        con.lineWidth=5;
        con.beginPath();
        con.arc(0,0,5,0,360,false);
        con.closePath();
        con.fillStyle="white";
        con.fill();
        con.stroke();
        con.restore();
        
    }
    clock();
    setInterval("clock()",1000);
</script>
</body>
</html>

转载于:https://www.cnblogs.com/liu-heng/p/6873826.html

weixin_30781433

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5时钟

<!doctype html><html><head><meta charset="utf-8"><title>H5时钟</title></head><body><canvas height="500" width="500" id="clock" style="b...
复制链接

扫一扫

h5时钟

“相关推荐”对你有帮助么？