canvas 实现时钟

l Canvas绘制钟表

绘制钟表

3.1.1. 效果

功能实现

l 绘制表盘

// 1 绘制表盘

cxt.beginPath();

cxt.arc(250,250,r,0,Math.PI*2);

cxt.closePath();

cxt.fillStyle=\'white\';

cxt.fill();

cxt.strokeStyle=\'steelblue\';

cxt.lineWidth=20

cxt.stroke();

l 绘制刻度

// 2 绘制刻度

// 2-1时针刻度

for(var i=0; i<12;i++){

getLine(Math.PI/180*i*30,-190,-170,\'black\',5);

}

// 2-2分针刻度

for(var i=0; i<60;i++){

getLine(Math.PI/180*i*6,-190,-180,\'black\',3);

}

// 定义生成刻度方法

function getLine(rotate,moveTo,lineTo,color,width){

cxt.save();

cxt.translate(250,250);

cxt.rotate(rotate)

cxt.beginPath();

cxt.moveTo(0,moveTo);

cxt.lineTo(0,lineTo);

cxt.closePath();

cxt.strokeStyle=color;

cxt.lineWidth=width;

cxt.stroke();

cxt.restore();

}

l 计算文字坐标

顺时针公式：

Y = Math.sin(弧度)*r;

X =Math.cos(弧度)*r

逆时针公式：

Y = Math.cos(弧度)*r;

X =Math.sin(弧度)*r

// 3 绘制文字

// 顺时针公式：

// Y = Math.sin(弧度)*r;

// X =Math.cos(弧度)*r

let text = [3,4,5,6,7,8,9,10,11,12,1,2]

for(var i=0;i<12;i++){

// 计算文字的坐标

let x = Math.cos(Math.PI/180*i*30)*r*0.7+250;

let y = Math.sin(Math.PI/180*i*30)*r*0.7+250;

cxt.font=\'20px 楷体\';

cxt.fillStyle=\'black\';

cxt.textAlign=\'center\';

cxt.textBaseline=\'middle\'

cxt.fillText(text[i],x,y);

}

l 绘制中间空心圆

// 4 绘制中心空心圆

cxt.beginPath();

cxt.arc(250,250,15,0,Math.PI*2);

cxt.closePath();

cxt.strokeStyle=\'black\';

cxt.lineWidth=1

cxt.stroke();

l 绘制小时

// 5 绘制指针

let time = new Date();

let h = time.getHours();

let m = time.getMinutes();

let s = time.getSeconds();

// h =

getLine(Math.PI/180*h*30,-120,30,\'steelblue\',10);

getLine(Math.PI/180*m*6,-130,20,\'orange\',5);

getLine(Math.PI/180*s*6,-155,10,\'red\',3);

l 绘制中间实心圆

// 6 绘制中心实心圆

cxt.beginPath();

cxt.arc(250,250,5,0,Math.PI*2);

cxt.closePath();

cxt.fillStyle=\'black\';

cxt.fill();

附上源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <canvas id="canvas" width="500" height="500"></canvas>
        <style type="text/css">
            canvas{
                background-color: #DDD;
            }
        </style>
    </head>
    
    <script type="text/javascript">
        let canvas = document.getElementById(\'canvas\');
        
        if(canvas.getContext(\'2d\')){
            let cxt = canvas.getContext(\'2d\');
            
            setInterval(()=>{
                getTime();
            },1000)
            
            
            function getTime(){
                let r = 200;
                
                // 绘制表盘
                cxt.beginPath();
                cxt.arc(250,250,r,0,Math.PI*2);
                cxt.closePath();
                cxt.fillStyle=\'white\';
                cxt.fill();
                cxt.strokeStyle=\'steelblue\';
                cxt.lineWidth=20
                cxt.stroke();
                
                // 2  绘制刻度
                // 2-1时针刻度
                for(var i=0; i<12;i++){
                    getLine(Math.PI/180*i*30,-190,-170,\'black\',5);
                }
                // 2-2分针刻度
                for(var i=0; i<60;i++){
                    getLine(Math.PI/180*i*6,-190,-180,\'black\',3);
                }
                
                //  3 绘制文字
                //     顺时针公式：
                //     Y = Math.sin(弧度)*r;
                //     X =Math.cos(弧度)*r
                let text = [3,4,5,6,7,8,9,10,11,12,1,2]
                for(var i=0;i<12;i++){
                    // 计算文字的坐标
                    let x = Math.cos(Math.PI/180*i*30)*r*0.7+250;
                    let y = Math.sin(Math.PI/180*i*30)*r*0.7+250;
                    
                    cxt.font=\'20px 楷体\';
                    cxt.fillStyle=\'black\';
                    cxt.textAlign=\'center\';
                    cxt.textBaseline=\'middle\'
                    cxt.fillText(text[i],x,y);
                    
                }
                
                // 4 绘制中心空心圆
                cxt.beginPath();
                cxt.arc(250,250,15,0,Math.PI*2);
                cxt.closePath();
                cxt.strokeStyle=\'black\';
                cxt.lineWidth=1
                cxt.stroke();
                
                
                 // 5 绘制指针
                let time = new Date();
                let h = time.getHours();
                let m = time.getMinutes();
                let s = time.getSeconds();
                 
                 // 改成十二小时制
                h = h > 12 ? (h-12) + m/60 : h + m/60;
                
                getLine(Math.PI/180*h*30,-120,30,\'steelblue\',10);
                getLine(Math.PI/180*m*6,-130,20,\'orange\',5);
                getLine(Math.PI/180*s*6,-155,10,\'red\',3);
                
                // 6 绘制中心实心圆
                cxt.beginPath();
                cxt.arc(250,250,5,0,Math.PI*2);
                cxt.closePath();
                cxt.fillStyle=\'black\';
                cxt.fill();
                
                // 定义生成刻度方法
                function getLine(rotate,moveTo,lineTo,color,width){
                    cxt.save();
                    cxt.translate(250,250);
                    cxt.rotate(rotate)
                    cxt.beginPath();
                    cxt.moveTo(0,moveTo);
                    cxt.lineTo(0,lineTo);
                    cxt.closePath();
                    cxt.strokeStyle=color;
                    cxt.lineWidth=width;
                    cxt.stroke();
                    cxt.restore();
                }
            }
        }else{
            console.log(\'请更换浏览器\')
        }
        
    </script>
    <body>
    </body>
</html>