HTML5小时钟

浏览数：42 / 时间：2015年06月09日

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    canvas{
        background: #eee;
    }
</style>
<script>
    window.onload=function(){
        var con=document.getElementById(‘con‘);
        var oCanvas=con.getContext("2d");
        var startX=200;
        var startY=200;
        var radius=100;
        

        setInterval(function(){
            oCanvas.clearRect(0, 0, 400, 400);
            // 阴影
            oCanvas.shadowColor="#888";
            oCanvas.shadowOffsetX=1;
            oCanvas.shadowOffsetY=1;
            oCanvas.shadowBlur=3;

            // 渐变
            var grd=oCanvas.createRadialGradient(startX, startY,1, startX, startY,100);
            grd.addColorStop(0, ‘#efefef‘);
            grd.addColorStop(1, "#cecece");
            oCanvas.fillStyle=grd;
            oCanvas.lineWidth=5;
            oCanvas.beginPath();
            oCanvas.strokeStyle="#a34";
            oCanvas.arc(startX, startY, radius, 0, 2*Math.PI);
            oCanvas.stroke();
            oCanvas.fill();

            // 去掉阴影
            oCanvas.shadowColor="#888";
            oCanvas.shadowOffsetX=0;
            oCanvas.shadowOffsetY=0;
            oCanvas.shadowBlur=0;

            // 画刻度
            dragMark();
            var myDate=new Date();
            var H=myDate.getHours()*30-90;
            var M=myDate.getMinutes()*6-90;
            var S=myDate.getSeconds()*6-90;
            // 时针
            dragT("#000",4,55,H);
            // 分针
            dragT("#888",3,65,M);
            // 秒针
            dragT("#f10",2,80,S);
            // 画中心点
            oCanvas.beginPath();
            oCanvas.fillStyle="#ccc";
            oCanvas.arc(200, 200, 6, 0, 2*Math.PI);
            oCanvas.fill();
        }, 1000);

        

        

        
        
        function dragT(color,lw,radius,angle){
            oCanvas.beginPath();
            oCanvas.strokeStyle=color;
            oCanvas.lineWidth=lw;
            oCanvas.moveTo(startX, startY);
            oCanvas.lineTo(startX+radius*Math.cos(angle*Math.PI/180), startY+radius*Math.sin(angle*Math.PI/180));
            oCanvas.stroke();
        }

        function dragMark(){
            for(var i = 0; i < 60; i++) {
                var lw=2;
                var radius1=radius-5;
                oCanvas.strokeStyle="#888";
                if (i%5==0) {
                    radius1=radius-8;
                    lw=3;
                    oCanvas.strokeStyle="#666";
                };
                oCanvas.lineWidth=lw;
                var angle=i*6*Math.PI/180;
                oCanvas.beginPath();
                oCanvas.moveTo(startX+radius*Math.cos(angle), startX+radius*Math.sin(angle));
                oCanvas.lineTo(startX+radius1*Math.cos(angle), startX+radius1*Math.sin(angle));
                oCanvas.stroke();
            };
            
        }
    }
</script>
</head>
<body>
    <canvas width="400" height="400" id="con"></canvas>
</body>
</html>