gezhongdonghuajihe
/
04-时钟.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        #cas{
            display: block;
            border:1px solid;
            margin:auto;
        }
    </style>
    <script>
        window.onload = function(){
            var canvas = document.getElementById('cas');
            var context = canvas.getContext('2d');
            var RADIUS = 100;
            drawClock();
            setInterval(function(){
                context.clearRect(0,0,canvas.width,canvas.height);
                drawClock();
            },1000)

            function drawCircle(){
                context.beginPath();
                context.arc(canvas.width/2,canvas.width/2,RADIUS , 0 , 2*Math.PI);
                context.stroke();
                context.save();
                context.beginPath();
                context.arc(canvas.width/2,canvas.width/2, 5 , 0 , 2*Math.PI);
                context.fill();
            }
            function drawtext(){
                var num = [3,4,5,6,7,8,9,10,11,12,1,2];
                for(var i=0;i<num.length;i++){
                    context.font = "18px 微软雅黑";
                    context.textAlign = "center";
                    context.textBaseline = "middle";
                    var textangle = i < 6 ? (i * Math.PI/6): -(12-i)* Math.PI/6;
                    context.fillText(num[i] , canvas.width/2 + (RADIUS-15) * Math.cos(textangle), canvas.width/2 + (RADIUS-15) * Math.sin(textangle));
                }
            }
            function drawPointer(){
                var date = new Date();
                var h = (date.getHours()+1) > 12 ? date.getHours()-12 : date.getHours();
                var m = date.getMinutes();
                var s = date.getSeconds();
                var h_angle = -getangle(Math.PI * h/6 + Math.PI/6*m/60);
                var m_angle = -getangle(Math.PI * m/30 + Math.PI/30*s/60);
                // console.log(s/60 * Math.PI*2 * 180/Math.PI)
                var s_angle = -getangle(s/30 * Math.PI);
                // console.log(Math.PI * h/6 + " and " + Math.PI/30*m/60)
                // console.log((Math.PI * m/30 + Math.PI/6*s/60)*180/Math.PI)
                // console.log(h_angle*180/Math.PI)
                // console.log(m_angle*180/Math.PI)
                // console.log(s_angle*180/Math.PI)
                drawLine(canvas.width/2,canvas.width/2,canvas.width/2 + (RADIUS*0.5)* Math.cos(h_angle) , canvas.width/2 + (RADIUS*0.6)* Math.sin(h_angle));
                drawLine(canvas.width/2,canvas.width/2,canvas.width/2 + (RADIUS*0.7)* Math.cos(m_angle) , canvas.width/2 + (RADIUS*0.8)* Math.sin(m_angle));
                drawLine(canvas.width/2,canvas.width/2,canvas.width/2 + (RADIUS*0.9)* Math.cos(s_angle) , canvas.width/2 + (RADIUS*0.8)* Math.sin(s_angle));
            }
            function getangle(angle){
                if(angle <= 1.5*Math.PI){
                    return (0.5*Math.PI-angle)
                }
                else {
                    return (2.5*Math.PI - angle)
                }
            }
            function drawLine(initx,inity,endx,endy){
                context.moveTo(initx , inity);
                context.lineTo(endx , endy);
                context.stroke();
            }
            function drawClock(){
                drawCircle();
                drawtext();
                drawPointer();
            }
        }
    </script>
    <title>Canvas时钟</title>
</head>
<body>
<div >
    <canvas id='cas' width="500" height="500">浏览器不支持canvas</canvas>
</div>
</body>
</html>