HTML5 programming practice part one - sample code sharing for implementing HTML5 clock

HTML5ProgrammingPractical Combat One-Implementation HTML5 clock sample code sharing

nbsp;html>
    <meta>
    <title>超酷HTML5时钟(作者：http://www.cnblogs.com/jscode/)</title>
    <style>
        .time {
            text-align: center;
            width:400px;
            font-family: "Book Antiqua",Palatino,serif;
            font-size: 40px;
            font-weight: bold;
            text-shadow: 1px 1px 3px #333;
            position:absolute;
        }
        .time em {
            background: white;
            position: absolute;
            top: 5px;
            left: 130px;
            height: 18px;
            width: 140px;
            opacity: 0.4;
        }
    </style>
    <script>
        var canvas, context;        
        function DrawClock() {
            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");
            setInterval("drawbackground()", 1000);
        }        function drawbackground() {            
        var radius = Math.min(canvas.width / 2, canvas.height / 2) - 15;            
        var centerx = canvas.width / 2;            
        var centery = canvas.height / 2;
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.save();
            context.lineWidth = 15;
            context.fillStyle = "#EFEFEF";
            context.strokeStyle = "#000";
            context.beginPath();
            context.arc(centerx, centery, radius, 0, Math.PI * 2, 0);
            context.fill();
            context.stroke();
            context.closePath();
            context.restore();            
            for (var i = 0; i < 60; i++) {
                context.save();
                context.fillStyle = "#EFEFEF";
                context.strokeStyle = "#000";   
                if (i % 5 == 0) {
                    context.lineWidth = 3;
                }
                context.beginPath();
                context.moveTo(centerx, centery);
                
                
   context.lineTo(centerx + (radius-6) * Math.cos(i * 6 * Math.PI / 180), centery - (radius-5) * Math.sin(i * 6 * Math.PI / 180));
                context.fill();
                context.stroke();
                context.closePath();
                context.restore();
            }
            context.moveTo(centerx, centery);
            context.save();
            context.fillStyle = "#EFEFEF";
            context.strokeStyle = "#EFEFEF";
            context.beginPath();
            context.arc(centerx, centery, radius-15, 0, Math.PI * 2, 0);
            context.fill();
            context.stroke();
            context.closePath();
            context.restore();        
            var r = radius - 25;
            context.font = "bold 20px 宋体";
            Drawtext("1", centerx + (Math.cos(60 * Math.PI / 180) * r), centery - (Math.sin(60 * Math.PI / 180) * r));
            Drawtext("2", centerx + (Math.cos(30 * Math.PI / 180) * r), centery - (Math.sin(30 * Math.PI / 180) * r));
            Drawtext("3", centerx + (Math.cos(0 * Math.PI / 180) * r), centery - (Math.sin(0 * Math.PI / 180) * r));
            Drawtext("4", centerx + (Math.cos(330 * Math.PI / 180) * r), centery - (Math.sin(330 * Math.PI / 180) * r));
            Drawtext("5", centerx + (Math.cos(300 * Math.PI / 180) * r), centery - (Math.sin(300 * Math.PI / 180) * r));
            Drawtext("6", centerx + (Math.cos(270 * Math.PI / 180) * r), centery - (Math.sin(270 * Math.PI / 180) * r));
            Drawtext("7", centerx + (Math.cos(240 * Math.PI / 180) * r), centery - (Math.sin(240 * Math.PI / 180) * r));
            Drawtext("8", centerx + (Math.cos(210 * Math.PI / 180) * r), centery - (Math.sin(210 * Math.PI / 180) * r));
            Drawtext("9", centerx + (Math.cos(180 * Math.PI / 180) * r), centery - (Math.sin(180 * Math.PI / 180) * r));
            Drawtext("10", centerx + (Math.cos(150 * Math.PI / 180) * r), centery - (Math.sin(150 * Math.PI / 180) * r));
            Drawtext("11", centerx + (Math.cos(120 * Math.PI / 180) * r), centery - (Math.sin(120 * Math.PI / 180) * r));
            Drawtext("12", centerx + (Math.cos(90 * Math.PI / 180) * r), centery - (Math.sin(90 * Math.PI / 180) * r));
            context.save();
            context.fillStyle="black";
            context.beginPath();
            context.arc(centerx,centery,10,0,Math.PI*2,0);
            context.fill();
            context.stroke();
            context.closePath();
            context.restore();
        
            drawpoint(centerx, centery, radius);
        
        }        
        function drawpoint(centerx, centery, radius) {           
        var date = new Date();            
        var h = date.getHours();
            h = h < 13 ? h : h - 12;            
            var m = date.getMinutes();            
            var s = date.getSeconds();        
            var th = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();            
            var tm = m < 10 ? "0" + m : m;            
            var ts = s < 10 ? "0" + s : s;
            document.getElementById("currtime").innerHTML = th + ":" + tm + ":" + ts;        
            var hr = h * 30 * Math.PI / 180 + (m / 60) * 30 * Math.PI / 180 + 90 * Math.PI / 180;           
             var mr = m * 6 * Math.PI / 180 + s / 60 * 6 * Math.PI / 180 + 90 * Math.PI / 180;            
             var sr = s * 6 * Math.PI / 180 + 90 * Math.PI / 180;
            context.save();
            context.lineWidth = 5;
            context.fillStyle = "darkgray";
            context.strokeStyle = "black";
            context.beginPath();
            context.moveTo(centerx + 20 * Math.cos(hr), centery + 20 * Math.sin(hr));
            context.lineTo(centerx - (radius - 120) * Math.cos(hr), centery - (radius - 120) * Math.sin(hr));
        
            context.moveTo(centerx + 20 * Math.cos(mr), centery + 20 * Math.sin(mr));
            context.lineTo(centerx - (radius - 80) * Math.cos(mr), centery - (radius - 80) * Math.sin(mr));
        
        
            context.moveTo(centerx + 20 * Math.cos(sr), centery + 20 * Math.sin(sr));
            context.lineTo(centerx - (radius - 50) * Math.cos(sr), centery - (radius - 50) * Math.sin(sr));
        
            context.closePath();
            context.fill();
            context.stroke();
            context.restore();
        }        
        function Drawtext(text, x, y) {
            context.save();
            x -= (context.measureText(text).width / 2);
            y += 9;
            context.beginPath();
            context.translate(x, y);
            context.fillText(text, 0, 0);
            context.restore();
        }
        
        window.onload = DrawClock;    </script>
        
        
    <h1 id="超酷HTML-时钟-作者-http-www-cnblogs-com-jscode">超酷HTML5时钟(作者：http://www.cnblogs.com/jscode/)</h1>
    <canvas>
    </canvas>
    <p><span>00:00:00</span>
    <em></em>
    </p>
    
    

Explanation of method function:

DrawClock method obtains Canvas context

drawbackground method is mainly to draw the background part of the clock: Borders, text, tick marks

drawpoint method is used to draw hour, minute, second lines

Drawtext method is used to add text

The above is the detailed content of HTML5 programming practice part one - sample code sharing for implementing HTML5 clock. For more information, please follow other related articles on the PHP Chinese website!