Canvas繪畫一個時鐘

時間 2019-12-10
標籤 canvas 繪畫一個時鐘简体版
原文原文鏈接
title: Canvas繪畫一個時鐘
date: 2016-11-21
tags: HTML5javascript
0x01 時鐘樣式

<!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 type="text/css">
        *{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #myCanvas{
            background: black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="2000" height="1000"></canvas>
</body>
<script type="text/javascript">
    setInterval(clock1,1000)
    // 每隔一秒調用一次 clock 函數

    function clock1(){        
        var drawing = document.querySelector("#myCanvas")
        var context = drawing.getContext("2d")
        context.save()
        //保存最原始的畫布狀態，如此便不須要 clearRect()清除整個畫布

        context.translate(500,350)
        //新的畫布狀態，將圓心移到原始畫布狀態的(500,350)處
        context.rotate(Math.PI/180*180)            
        // 將整個座標系選擇 180 deg，方便顯示以後的時間數字，以保證 12 在頂部
                    
        // Start drawing clock shape(便是十二邊形)
        var r= 200
        // 定義錶盤半徑

        context.save()
        // 保存當前狀態（便是 "第一個狀態"[將上一個狀態記爲第一個狀態]）
        var radGrad = context.createRadialGradient(0,0,10,0,0,70)
        // 添加錶盤漸變範圍
        radGrad.addColorStop(0.4,"black")
        radGrad.addColorStop(0.2,"deeppink")
        // 添加漸變顏色
        context.fillStyle = radGrad;
        // 在 fillStyle 中應用漸變顏色
        context.strokeStyle = "deeppink"
        // 描邊顏色
        context.lineWidth ="1"
        // 線條寬度
        context.beginPath()
        // 開始繪畫
        moveTo(0,0)
        // 從圓心開始
        for(var i=0;i<12;i++){
            context.rotate(Math.PI/180*30)
            // 每次旋轉座標系 30 deg
            context.lineTo(0,r)        
            // 在 y  軸上描點    
        }        
        context.closePath()
        // 閉合路勁
        context.stroke()
        // 描邊
        context.fill()
        // 填充
        context.restore()
        // 恢復上一個狀態(恢復之後當前畫布狀態 「第一個狀態」)

        // End clock shape

        //Start hours masks            
        context.save()
        // 保存當前狀態("第一個狀態")
        context.strokeStyle = "deeppink"
        context.fillStyle = "deeppink"        
        for(var j=0;j<12;j++){
            context.beginPath()
            context.rotate(Math.PI/180*30)            
            context.moveTo(0,r)
            context.lineTo(0,r-10);
            // hour masks            
            // context.closePath() 繪製直線的時候不須要閉合路徑，切記！
            context.stroke()
            // 描邊
        }
        context.restore()
        //恢復上一個狀態(恢復之後當前畫布狀態 「第一個狀態」)
        //End hours masks
        
        // 設置數字格式
        context.save()
        // 保存當前狀態("第一個狀態")
        context.strokeStyle = "deeppink"
        context.fillStyle = "deeppink"        
        context.lineWidth = "1"
        context.font = "20px 宋體"
        context.textAlign = "center"
        context.textBaseline = "middle"
        for(var k=0;k<12;k++){
            context.rotate(Math.PI/180*30)
            context.fillText(k+1,0,r-20)            
            // 添加數字
        }    
        context.restore()
        //恢復上一個狀態(恢復之後當前畫布狀態 「第一個狀態」)

        // Start minutes masks
        context.save()
        // 保存當前狀態("第一個狀態")
        context.strokeStyle = "deeppink"
        for(var k=0;k<60;k++){                
            if(k%5 !=0){            
                context.beginPath()            
                context.moveTo(0,r-5)
                context.lineTo(0,r-10)    
                context.stroke()
            }        
            context.rotate(Math.PI/180*6)                
        }
        context.restore()
        //恢復上一個狀態(恢復之後當前畫布狀態 「第一個狀態」)
        
        var date = new Date()
        var hour = date.getHours()
        var minute = date.getMinutes()
        var seconds = date.getSeconds()
        hour = hour>12?hour-12:hour
        // write hours
        context.save()
        // 保存當前狀態("第一個狀態")
        context.strokeStyle = "deeppink"
        context.lineWidth ="4"
        context.beginPath()
        context.rotate(Math.PI/180*(360/12*hour)+Math.PI/180*(30*(minute/60))+Math.PI/180*(360/12*(seconds/3600)))
        context.moveTo(0,0)
        context.lineTo(0,130)
        context.stroke()
        context.restore()
        //恢復上一個狀態(恢復之後當前畫布狀態 「第一個狀態」)

        // write minute
        //保存當前狀態("第一個狀態")
        context.save()
        context.strokeStyle = "deeppink"
        context.width = "3"
        context.beginPath()
        context.rotate(Math.PI/180*(6*minute)+Math.PI/180*(6*(seconds/60)))
        context.moveTo(0,0)
        context.lineTo(0,170)
        context.stroke()
        context.restore()
        //恢復上一個狀態(恢復之後當前畫布狀態 「第一個狀態」)

        // write seconds
        context.save()
        //保存當前狀態("第一個狀態")
        context.strokeStyle = "deeppink"
        context.width = ""
        context.beginPath()
        context.rotate(Math.PI/180*(6*seconds))
        context.moveTo(0,0)
        context.lineTo(0,180)
        context.stroke()
        context.restore()    
        //恢復上一個狀態(恢復之後當前畫布狀態 「第一個狀態」)
        
        context.restore()
        // 恢復到原始狀態
    }
</script>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。