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>