html5 canvas 做的一个时钟效果 




<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML5 canvas超逼真的模拟时钟特效效果演示</title>
    <meta charset="utf-8" />
    <script type="text/javascript">

        window.onload = function () {
            var canvas = document.getElementById("canvas");
            var cobj = canvas.getContext("2d");
            var centerX = 200;
            var centerY = 200;
            var radius = 150;
            function initClock() {
                cobj.clearRect(0, 0, canvas.width, canvas.height);

                var datetime = new Date();
                var hh = datetime.getHours();
                var mm = datetime.getMinutes();
                var ss = datetime.getSeconds();
                //hh
                var hhDu = hh * (360 / 12) - 90 + ((mm / 60) * 30);

                var xH = ((radius - 65) * Math.cos(Math.PI / 180 * hhDu)) + centerX;
                var yH = ((radius - 65) * Math.sin(Math.PI / 180 * hhDu)) + centerY;
                drawLine(centerX, centerY, xH, yH, "#222222", 10);
                //mm
                var mmDu = mm * (360 / 60) - 90;
                var xM = ((radius - 35) * Math.cos(Math.PI / 180 * mmDu)) + centerX;
                var yM = ((radius - 35) * Math.sin(Math.PI / 180 * mmDu)) + centerY;
                drawLine(centerX, centerY, xM, yM, "#222222", 6);
                //ss
                var ssDu = ss * (360 / 60) - 90;
                var xS = ((radius - 20) * Math.cos(Math.PI / 180 * ssDu)) + centerX;
                var yS = ((radius - 20) * Math.sin(Math.PI / 180 * ssDu)) + centerY;
                drawLine(centerX, centerY, xS, yS, "#F3A829", 2);

                for (var i = 0; i < 12; i++) {
                    var begX = (radius * Math.cos(Math.PI / 180 * (30 * i))) + centerX;
                    var begY = (radius * Math.sin(Math.PI / 180 * (30 * i))) + centerY;
                    var endX = ((radius - 10) * Math.cos(Math.PI / 180 * (30 * i))) + centerX;
                    var endY = ((radius - 10) * Math.sin(Math.PI / 180 * (30 * i))) + centerY;
                    drawLine(begX, begY, endX, endY, "#000", 5);

                    var x = ((radius - 30) * Math.cos(Math.PI / 180 * (30 * i))) + centerX;
                    var y = ((radius - 30) * Math.sin(Math.PI / 180 * (30 * i))) + centerY;
                    var h = i + 3;
                    h = (h % 12);
                    if (h == 0) h = 12;
                    x -= 5; y += 5;
                    drawFont(x, y, h);
                }
                for (var i = 0; i < 60; i++) {
                    var begX = (radius * Math.cos(Math.PI / 180 * (6 * i))) + centerX;
                    var begY = (radius * Math.sin(Math.PI / 180 * (6 * i))) + centerY;
                    var endX = ((radius - 5) * Math.cos(Math.PI / 180 * (6 * i))) + centerX;
                    var endY = ((radius - 5) * Math.sin(Math.PI / 180 * (6 * i))) + centerY;
                    drawLine(begX, begY, endX, endY, "#000", 2);

                }


                cobj.fillStyle = "#F3A829";
                cobj.lineWidth = 0;
                cobj.arc(centerX, centerY, 10, 0, 360, false);
                cobj.fill();
                function drawLine(begX, begY, endX, endY, color, width) {
                    cobj.beginPath();
                    cobj.strokeStyle = color;
                    cobj.lineWidth = width;
                    cobj.lineCap = "round";
                    cobj.moveTo(begX, begY);
                    cobj.lineTo(endX, endY);
                    cobj.stroke();
                    cobj.closePath();
                }

                function drawFont(x, y, text) {
                    cobj.font = '20px helvetica';
                    cobj.fillText(text, x, y);
                }
            }
            setInterval(initClock, 1000);
        };
    </script>
</head>
<body>
    <canvas id="canvas" width="400" height="400">
        您的浏览器不支持
    </canvas>
</body>
</html>

 

posted @ 2015-10-07 20:29  下-个路口  阅读(446)  评论(0)    收藏  举报