canvas之可爱的时钟

最新推荐文章于 2021-03-10 10:54:09 发布
weixin_44389107
最新推荐文章于 2021-03-10 10:54:09 发布
阅读量139
点赞数
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/weixin_44389107/article/details/88383012
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<canvas id="clock" width="500px" height="500px" style="border:1px solid #000"></canvas>
<script>
    var canvas=document.getElementById("clock");
    var ctx=canvas.getContext("2d");
    function drawClock(){
        // 获取系统时间
        var today=new Date();
        var hour=today.getHours();
        var min=today.getMinutes();
        var sec=today.getSeconds();
        // alert(hour);
        hour>12?hour-12:hour;
        // 清空画布
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //绘制时刻度
        ctx.strokeStyle="yellow";
        ctx.lineWidth=10;
        ctx.beginPath(); //起始一条路径
        ctx.arc(250,250,200,0,Math.PI*2);
        ctx.stroke();
        ctx.closePath();//结束路径
        ctx.clip();//按圆框裁剪时钟背景图

        // 绘制表盘背景
        var img =new Image();
        img.src="image/1.jpg";
        ctx.drawImage(img,40,40,420,420);


        for(var i=0;i<12;i++){
            ctx.save();
            ctx.strokeStyle="yellow";
            ctx.lineWidth=7;
            ctx.translate(250,250);//设置原点
            ctx.rotate(30*i*Math.PI/180);//设置旋转角度,隔30度画一个分刻度
            ctx.beginPath();
            ctx.moveTo(0,-197);
            ctx.lineTo(0,-175);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        //绘制分刻度
        for(var i=0;i<60;i++){
            ctx.save();
            ctx.strokeStyle="yellow";
            ctx.lineWidth=5;
            ctx.translate(250,250);//设置原点
            ctx.rotate(6*i*Math.PI/180);//设置旋转角度,隔30度画一个分刻度
            ctx.beginPath();
            ctx.moveTo(0,-195);
            ctx.lineTo(0,-185);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        // 绘制时针
        ctx.save();
        ctx.strokeStyle="pink";
        ctx.lineWidth=7;
        ctx.translate(250,250);
        ctx.rotate(hour*30*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,-130);
        ctx.lineTo(0,0);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        //绘制分针
        ctx.save();
        ctx.strokeStyle="pink";
        ctx.lineWidth=4;
        ctx.translate(250,250);
        ctx.rotate(min*6*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,-150);
        ctx.lineTo(0,0);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        // 绘制秒针
        ctx.save();
        ctx.strokeStyle="pink";
        ctx.lineWidth=3;
        ctx.translate(250,250);
        ctx.rotate(sec*6*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,-170);
        ctx.lineTo(0,0);
        ctx.stroke();
        ctx.closePath();
        // cxt.restore();

        // 美化表盘,中间小圆
        ctx.beginPath();
        ctx.arc(0,0,7,0,Math.PI*2);
        ctx.fillStyle="yellow";
        ctx.fill();
        ctx.strokeStyle="pink";
        ctx.stroke();
        ctx.closePath();

        // 秒针上的小圆
        ctx.beginPath();
        ctx.arc(0,-140,7,0,Math.PI*2);
        ctx.fillStyle="yellow";
        ctx.fill();
        ctx.strokeStyle="pink";
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        //定位时间
        var h=hour;
        var m=min;
        var s=sec;
        var one=h>9?h:('0'+h);
        var two=m>9?m:('0'+m);
        var three=s>9?s:('0'+s);
        ctx.beginPath();
        ctx.fillStyle='rgb(60,253,125)';
        ctx.font='20px 微软雅黑';
        ctx.fillText(one+':'+two+':'+three,210,380);
        ctx.closePath();
        //文本
        var str = "time keeping";
        ctx.font = "20px 宋体";
        ctx.fillStyle = "#eee";
        ctx.fillText(str ,190,410);

    }
    drawClock();
    setInterval(drawClock,1000);//设置定时器

</script>
</body>
</html>