canvas制作简易钟表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    #cvs{
        margin: 100px 200px;
    }
    </style>
</head>
<body>
    <canvas id="cvs" width="400px" height="400"></canvas>
</body>
<script>
    var cvs=document.getElementById("cvs");
    var ctx=cvs.getContext("2d");
function tt (){
     //外层圆
    ctx.beginPath();
    ctx.lineWidth=4;
    ctx.arc(200,200,150,0,2*Math.PI,false);
    ctx.strokeStyle="#ddd";
    ctx.stroke()
    ctx.closePath();
    //  秒针盘
    ctx.beginPath();
    ctx.lineWidth=3;
    for(var i=0;i<60;i++){
        ctx.moveTo(200,200);
        ctx.arc(200,200,150,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
    }
    ctx.strokeStyle="#ddd";
    ctx.stroke();
    ctx.closePath;
    //覆盖圆
    ctx.beginPath();
    ctx.lineWidth=4;
    ctx.arc(200,200,144,0,2*Math.PI,false);
    ctx.fillStyle="#fff";
    ctx.fill()
    ctx.closePath();
    //  时针盘
    ctx.beginPath();
    ctx.lineWidth=5;
    for(var i=0;i<12;i++){
        ctx.moveTo(200,200);
        ctx.arc(200,200,150,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
    }
    ctx.strokeStyle="#dd0";
    ctx.stroke();
    ctx.closePath;
    //覆盖圆
    ctx.beginPath();
    ctx.lineWidth=4;
    ctx.arc(200,200,140,0,2*Math.PI,false);
    ctx.fillStyle="#fff";
    ctx.fill();
    ctx.closePath();
    var Odate=new Date();
    var Ohours=Odate.getHours();
    var Omiunties=Odate.getMinutes();
    var Oseconds=Odate.getSeconds();
    var h=(-90+Ohours*30+Omiunties/2)*Math.PI/180;
    var m=(-90+Omiunties*6)*Math.PI/180;
    var s=(-90+Oseconds*6)*Math.PI/180;
    //时针
    ctx.beginPath();
    ctx.lineWidth=7;
    ctx.moveTo(200,200)
    ctx.arc(200,200,70,h,h,false);
    ctx.strokeStyle="yellow";
    ctx.stroke();
    ctx.closePath();
    //分针
    ctx.beginPath();
    ctx.lineWidth=5;
    ctx.moveTo(200,200)
    ctx.arc(200,200,80,m,m,false);
    ctx.strokeStyle="green";
    ctx.stroke();
    ctx.closePath();
    //秒针
    ctx.beginPath();
    ctx.lineWidth=4;
    ctx.moveTo(200,200)
    ctx.arc(200,200,90,s,s,false);
    ctx.strokeStyle="red";
    ctx.stroke();
    ctx.closePath();
    //圆心
    ctx.beginPath();
    ctx.arc(200,200,5,0,2*Math.PI,false);
    ctx.fillStyle="pink";
    ctx.fill();
    ctx.closePath();
    //表盘刻字
    ctx.beginPath();
    ctx.fillStyle="#d00";
    ctx.fillText("1",255,100);
    ctx.fillText("2",305,145);
    ctx.fillText("3",320,210);
    ctx.fillText("4",305,270);
    ctx.fillText("5",255,315);
    ctx.fillText("6",195,330);
    ctx.fillText("7",130,315);
    ctx.fillText("8",90,270);
    ctx.fillText("9",70,207);
    ctx.fillText("10",90,140);
    ctx.fillText("11",130,100);
    ctx.fillText("12",190,85);
    ctx.font="18px 微软雅黑"

}
   tt();
   setInterval(tt,1000)


</script>
</html>
canvas制作简易钟表

猜你喜欢
