Html5繪制時鍾

最近在對Html5比較感興趣，就用空閑時間做一些小例子進行練習，今天繪制一個走動的時鍾，具體如下圖所示：

具體思路在上圖已有說明，代碼如下：

<script type="text/javascript">

        //繪制圓形的弧度，ctx 為繪制環境，x,y為繪制中心，r為繪制半徑，st為起始弧度，end為結束弧度
        function circle(ctx, x, y, r, st, end, w) {
            ctx.lineWidth = w;
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.arc(x, y, r, st, end, true);
            ctx.stroke();
        }

        //畫一個白色的圓，用以覆蓋
        function circle0(ctx, x, y, r, st, end) {
            ctx.fillStyle = "#ffffff";
            ctx.beginPath();
            ctx.arc(x, y, r, st, end, true);
            ctx.fill();
        }
        function circle1(ctx, x, y, r, st, end, w) {
            ctx.strokeStyle = "gray";
            ctx.lineWidth = w;
            ctx.beginPath();
            ctx.arc(x, y, r, st, end, true);
            ctx.stroke();
        }

        //繪制時鍾用的線
        function line(ctx, x1, y1, x2, y2, w) {
            if (w == 1) {
                ctx.strokeStyle = "red";
            } else if (w == 2) {
                ctx.strokeStyle = "blue";
            } else {
                ctx.strokeStyle = "black";
            }
            ctx.lineWidth = w;
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
        }
        function drawClock() {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.clearRect(0, 0, c.width, c.height);
            //繪制一個鍾表
            var cX = 300;
            var cY = 200;
            var radius = 100;

            //繪制分與秒的刻度
            for (var i = 0; i < 60; i++) {
                circle(ctx, cX, cY, radius, i * 6 * Math.PI / 180, (i + 1) * 6 * Math.PI / 180, 1);
            }
            circle0(ctx, cX, cY, radius * 9 / 10, 0, 2 * Math.PI, true);
            //繪制時刻度
            for (var i = 0; i < 12; i++) {
                circle(ctx, cX, cY, radius, i * 30 * Math.PI / 180, (i + 1) * 30 * Math.PI / 180, 2);
            }
            circle0(ctx, cX, cY, radius * 8 / 10, 0, 2 * Math.PI, true);

            //外圍再畫一圈
            circle1(ctx, cX, cY, radius * 11 / 10, 0, 2 * Math.PI, 1);
            ctx.save();
            ctx.fillStyle = "black";
            ctx.font = "10px Arial";
            //在鍾表的周圍畫上數字
            for (var i = 0; i < 12; i++) {
                var fX = cX + Math.cos((i + 1) * 5 * 6 * Math.PI / 180 - Math.PI / 2) * radius * 7.5 / 10;
                var fY = cY + Math.sin((i + 1) * 5 * 6 * Math.PI / 180 - Math.PI / 2) * radius * 7.5 / 10;
                ctx.fillText((i + 1), fX, fY);
            }
            var date = new Date();
            var second = date.getSeconds();
            var minute = date.getMinutes();
            var hour = date.getHours();
            hour = hour % 12; //采用12小時制


            var secondX = cX + Math.cos(second * 6 * Math.PI / 180 - Math.PI / 2) * radius * 9 / 10;
            var secondY = cY + Math.sin(second * 6 * Math.PI / 180 - Math.PI / 2) * radius * 9 / 10;
            var minuteX = cX + Math.cos(minute * 6 * Math.PI / 180 - Math.PI / 2) * radius * 8 / 10;
            var minuteY = cY + Math.sin(minute * 6 * Math.PI / 180 - Math.PI / 2) * radius * 8 / 10;
            //小時為了准確起見，應該要加上分的弧度
            var hourX = cX + Math.cos(hour * 30 * Math.PI / 180 + (minute * 6 * Math.PI / 180) / 12 - Math.PI / 2) * radius * 6.5 / 10;
            var hourY = cY + Math.sin(hour * 30 * Math.PI / 180 + (minute * 6 * Math.PI / 180) / 12 - Math.PI / 2) * radius * 6.5 / 10;
            //畫秒針，紅色
            line(ctx, cX, cY, secondX, secondY, 1);
            //畫分針，藍色
            line(ctx, cX, cY, minuteX, minuteY, 2);
            //畫時針，黑色
            line(ctx, cX, cY, hourX, hourY, 3);
            ctx.fillStyle = "black";
            ctx.font = "15px Arial";
            ctx.fillText("CurrentTime is : " + date.toLocaleString(), 150, 450);
            ctx.save();
        }
        window.onload = function () {
            //循環，1s一次，且要在加載完才可以開始，否則會出現找不到對象的異常
            setInterval(drawClock, 1000);
        }
    </script>