利用HTML5的Canvas繪制時鐘

http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html

  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="Canvas" width="800" height="800"></canvas>
<script type="text/javascript">
    window.onload = draw;
    function draw() {
        var canvas = document.getElementById("Canvas");
        var context = canvas.getContext("2d");
        context.save(); 
        context.translate(200, 200);
        var deg = 2 * Math.PI / 12;
        //表盤
        context.save();
        context.beginPath();
        context.arc(0, 0, 150, 0, 2 * Math.PI, false);

        context.fillStyle = "blue";
        context.fill();
        context.closePath();
        context.restore();
        //數字
        context.save();
        context.beginPath();
        for (var i = 1; i < 13; i++) {
            var x1 = Math.sin(i * deg);
            var y1 = -Math.cos(i * deg);
            context.fillStyle = "#fff";
            context.font = "bold 20px Calibri";
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillText(i, x1 * 120, y1 * 120);
        }
        context.closePath();
        context.restore();
        //new Date
        var time = new Date();
        var h = (time.getHours() % 12) * 2 * Math.PI / 12;
        var m = time.getMinutes() * 2 * Math.PI / 60;
        var s = time.getSeconds() * 2 * Math.PI / 60;

        //時針
        context.save();
        context.rotate(h + m / 12 + s / 720);
        context.beginPath();
        context.moveTo(0, 6);
        context.lineTo(0, -85);
        context.strokeStyle = "#fff";
        context.lineWidth = 6;
        context.stroke();
        context.closePath();
        context.restore();
        //分針
        context.save();
        context.rotate(m + s / 60);
        context.beginPath();
        context.moveTo(0, 8);
        context.lineTo(0, -105);
        context.strokeStyle = "#fff";
        context.lineWidth = 4;
        context.stroke();
        context.closePath();
        context.restore();
        //秒針
        context.save();
        context.rotate(s);
        context.beginPath();
        context.moveTo(0, 10);
        context.lineTo(0, -120);
        context.strokeStyle = "#fff";
        context.lineWidth = 2;
        context.stroke();
        context.closePath();
        context.restore();
        context.restore();
        setTimeout(draw, 1000);

    }
</script>
</body>
</html>  
下載 (1).jpg
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 曾經有一份美好的愛情放在我的面前我沒有珍惜。等到失去后才后悔莫及。如果可以再對小李說。毛欣想說。這輩子無緣再牽手。...
    毛欣與小李閱讀 2,660評論 0 13
  • NBN的故事81:第三次交鋒 時間:9000年3月23日 地點:地球 喬治讓人堅守醫(yī)院,打電話向其他國家要求支援...
    我我了閱讀 202評論 0 2
  • 這是一個JStorm使用教程,不包含環(huán)境搭建教程,直接在公司現有集群上跑任務,關于JStorm集群環(huán)境搭建,后續(xù)研...
    Coselding閱讀 6,409評論 1 9